Deluge
diff options
Diffstat (limited to 'deluge/ui/web/resources/themes')
74 files changed, 9101 insertions, 0 deletions
diff --git a/deluge/ui/web/resources/themes/compass_init.rb b/deluge/ui/web/resources/themes/compass_init.rb new file mode 100755 index 000000000..167d82266 --- /dev/null +++ b/deluge/ui/web/resources/themes/compass_init.rb @@ -0,0 +1,6 @@ +# include the utils rb file which has extra functionality for the ext theme +dir = File.dirname(__FILE__) +require File.join(dir, 'lib', 'utils.rb') + +# register ext4 as a compass framework +Compass::Frameworks.register 'ext4', dir
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/lib/utils.rb b/deluge/ui/web/resources/themes/lib/utils.rb new file mode 100644 index 000000000..d105d6cc2 --- /dev/null +++ b/deluge/ui/web/resources/themes/lib/utils.rb @@ -0,0 +1,93 @@ +module ExtJS4 + module SassExtensions + module Functions + module Utils + def parsebox(list, n) + assert_type n, :Number + if !n.int? + raise ArgumentError.new("List index #{n} must be an integer") + elsif n.to_i < 1 + raise ArgumentError.new("List index #{n} must be greater than or equal to 1") + elsif n.to_i > 4 + raise ArgumentError.new("A box string can't contain more then 4") + end + + new_list = list.clone.to_a + size = new_list.size + + if n.to_i >= size + if size == 1 + new_list[1] = new_list[0] + new_list[2] = new_list[0] + new_list[3] = new_list[0] + elsif size == 2 + new_list[2] = new_list[0] + new_list[3] = new_list[1] + elsif size == 3 + new_list[3] = new_list[1] + end + end + + new_list.to_a[n.to_i - 1] + end + + def parseint(value) + Sass::Script::Number.new(value.to_i) + end + + # Returns a background-image property for a specified images for the theme + def theme_image(theme, path, without_url = false, relative = false) + path = path.value + theme = theme.value + without_url = (without_url.class == FalseClass) ? without_url : without_url.value + + relative_path = "../images/" + + if relative + if relative.class == Sass::Script::String + relative_path = relative.value + relative = true + elsif relative.class == FalseClass || relative.class == TrueClass + relative = relative + else + relative = relative.value + end + else + relative = false + end + + if relative + image_path = File.join(relative_path, theme, path) + else + images_path = File.join($ext_path, 'resources', 'themes', 'images', theme) + image_path = File.join(images_path, path) + end + + if !without_url + url = "url('#{image_path}')" + else + url = "#{image_path}" + end + + Sass::Script::String.new(url) + end + + def theme_image_exists(path) + result = false + + where_to_look = path.value.gsub('../../resources', 'resources') + + if where_to_look && FileTest.exists?("#{where_to_look}") + result = true + end + + return Sass::Script::Bool.new(result) + end + end + end + end +end + +module Sass::Script::Functions + include ExtJS4::SassExtensions::Functions::Utils +end
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/_all.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/_all.scss new file mode 100644 index 000000000..366a643ef --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/_all.scss @@ -0,0 +1,110 @@ +@import "compass/css3"; +@import "blueprint/typography"; + +$include-default: true !default; +$include-default-uis: true !default; + +@import 'functions'; +@import 'variables'; +@import 'mixins'; + +//core +@import 'core'; + +//layout +@import 'layout/layout'; + +//utils +@import 'util/tool'; +@import 'util/messagebox'; +@import 'util/splitter'; +@import 'util/resizable'; +@import 'util/dragdrop'; +@import 'util/scroller'; +@import 'util/focus'; + +//widgets +@import 'widgets'; + +@if $scope-reset-css { + .#{$prefix}reset { + @if $include-default { + @include extjs-boundlist; + @include extjs-button; + @include extjs-btn-group; + @include extjs-datepicker; + @include extjs-colorpicker; + @include extjs-menu; + @include extjs-grid; + @include extjs-form; + @include extjs-form-field; + @include extjs-form-fieldset; + @include extjs-form-checkboxfield; + @include extjs-form-checkboxgroup; + @include extjs-form-triggerfield; + @include extjs-form-htmleditor; + @include extjs-panel; + @include extjs-qtip; + @include extjs-slider; + @include extjs-progress; + @include extjs-toolbar; + @include extjs-window; + @include extjs-messagebox; + @include extjs-tabbar; + @include extjs-tab; + @include extjs-tree; + @include extjs-drawcomponent; + @include extjs-viewport; + } + + @include extjs-dragdrop; + @include extjs-resizable; + @include extjs-splitter; + @include extjs-layout; + @include extjs-tool; + @include extjs-scroller; + + @include extjs-html; + } +} +@else { + @if $include-default { + @include extjs-boundlist; + @include extjs-button; + @include extjs-btn-group; + @include extjs-datepicker; + @include extjs-colorpicker; + @include extjs-menu; + @include extjs-grid; + @include extjs-form; + @include extjs-form-field; + @include extjs-form-fieldset; + @include extjs-form-file; + @include extjs-form-checkboxfield; + @include extjs-form-checkboxgroup; + @include extjs-form-triggerfield; + @include extjs-form-htmleditor; + @include extjs-panel; + @include extjs-qtip; + @include extjs-slider; + @include extjs-progress; + @include extjs-toolbar; + @include extjs-window; + @include extjs-messagebox; + @include extjs-tabbar; + @include extjs-tab; + @include extjs-tree; + @include extjs-drawcomponent; + @include extjs-viewport; + } + + @include extjs-dragdrop; + @include extjs-resizable; + @include extjs-splitter; + @include extjs-layout; + @include extjs-tool; + @include extjs-scroller; + + @include extjs-html; +} + diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/_core.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/_core.scss new file mode 100644 index 000000000..6e4742451 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/_core.scss @@ -0,0 +1,2 @@ +@import 'core/reset'; +@import 'core/core';
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/_functions.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/_functions.scss new file mode 100644 index 000000000..3cb041437 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/_functions.scss @@ -0,0 +1,44 @@ +@function min($value1, $value2) { + @if $value1 > $value2 { + @return $value2; + } + @else if $value2 > $value1 { + @return $value1; + } + @return $value1; +} + +@function max($value1, $value2) { + @if $value1 > $value2 { + @return $value1; + } + @else if $value2 > $value1 { + @return $value2; + } + @return $value1; +} + +@function top($box) { + @return parsebox($box, 1); +} +@function right($box) { + @return parsebox($box, 2); +} +@function bottom($box) { + @return parsebox($box, 3); +} +@function left($box) { + @return parsebox($box, 4); +} +@function vertical($box) { + @return top($box) + bottom($box); +} +@function horizontal($box) { + @return left($box) + right($box); +} +@function boxmax($box) { + @return max(max(top($box), right($box)), max(bottom($box), left($box))); +} +@function boxmin($box) { + @return min(min(top($box), right($box)), min(bottom($box), left($box))); +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/_mixins.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/_mixins.scss new file mode 100644 index 000000000..1a95264e9 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/_mixins.scss @@ -0,0 +1,22 @@ +@import 'mixins/background-gradient'; +@import 'mixins/theme-background-image'; +@import 'mixins/inner-border'; +@import 'mixins/frame'; + +@mixin no-select { + -moz-user-select:none; + -khtml-user-select:none; + -webkit-user-select:ignore; + + cursor:default; +} + +@mixin important-no-border-radius { + //we need to hard code this so we can declare !important + -moz-border-radius: 0 !important; + -webkit-border-radius: 0 !important; + -o-border-radius: 0 !important; + -ms-border-radius: 0 !important; + -khtml-border-radius: 0 !important; + border-radius: 0 !important; +} diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/_variables.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/_variables.scss new file mode 100644 index 000000000..eb110ae41 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/_variables.scss @@ -0,0 +1,41 @@ +@import 'variables/core'; + +$mix-color: desaturate(lighten($base-color, 37), 5) !default; + +@import 'variables/focus'; +@import 'variables/panel'; +@import 'variables/grid'; +@import 'variables/button'; +@import 'variables/pickers'; +@import 'variables/toolbar'; +@import 'variables/form'; +@import 'variables/menu'; +@import 'variables/window'; +@import 'variables/tabs'; +@import 'variables/qtip'; +@import 'variables/progress-bar'; +@import 'variables/btn-group'; +@import 'variables/boundlist'; +@import 'variables/tree'; +@import 'variables/layout'; +@import 'variables/loadmask'; +@import 'variables/htmleditor'; + + + + + + + + + + + + + + + + + + + diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/_widgets.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/_widgets.scss new file mode 100644 index 000000000..b7b466af1 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/_widgets.scss @@ -0,0 +1,22 @@ +@import 'widgets/boundlist'; +@import 'widgets/button'; +@import 'widgets/btn-group'; +@import 'widgets/datepicker'; +@import 'widgets/colorpicker'; +@import 'widgets/menu'; +@import 'widgets/panel'; +@import 'widgets/toolbar'; +@import 'widgets/form'; +@import 'widgets/qtip'; +@import 'widgets/window'; +@import 'widgets/tabbar'; +@import 'widgets/tab'; +@import 'widgets/slider'; +@import 'widgets/grid'; +@import 'widgets/tree'; +@import 'widgets/loadmask'; +@import 'widgets/progress-bar'; +@import 'widgets/drawcomponent'; +@import 'widgets/viewport'; + +@import 'widgets/html'; diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/core/_core.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/core/_core.scss new file mode 100644 index 000000000..68f1fba50 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/core/_core.scss @@ -0,0 +1,317 @@ +.#{$prefix}body { + color: $color; + font-size: $font-size; + font-family: $font-family; +} + +.#{$prefix}clear { + overflow: hidden; + clear: both; + height: 0; + width: 0; + font-size: 0; + line-height: 0; +} + +.#{$prefix}layer { + position: absolute; + overflow: hidden; + zoom: 1; +} + +.#{$prefix}shim { + position: absolute; + left: 0; + top: 0; + overflow: hidden; + @include opacity(0); +} + +.#{$prefix}hide-display { + display: none !important; +} + +.#{$prefix}hide-visibility { + visibility:hidden !important; +} + +.#{$prefix}item-disabled { + @include opacity(0.4); +} + +.#{$prefix}ie6 .#{$prefix}item-disabled { + filter:none; +} + +.#{$prefix}hidden, +.#{$prefix}hide-offsets { + display: block !important; + position: absolute!important; + left: -10000px!important; + top: -10000px!important; +} + +.#{$prefix}hide-nosize { + height: 0!important; + width: 0!important; +} + +.#{$prefix}masked-relative { + position: relative; +} + +@if $include-ie { + .#{$prefix}ie6 .#{$prefix}masked select, + .#{$prefix}ie6.#{$prefix}body-masked select { + visibility: hidden !important; + } +} + +// Styles for the three schemes for showing shadows under an element: CSS3, IE blur transform, or 9 point framing with images. +.#{$prefix}css-shadow { + position: absolute; + @include border-radius($window-border-radius); +} + +.#{$prefix}ie-shadow { + background-color:#777; + display: none; + position: absolute; + overflow: hidden; + zoom: 1; +} + +.#{$prefix}frame-shadow { + display: none; + position: absolute; + overflow: hidden; +} + +.#{$prefix}frame-shadow * { + overflow: hidden; +} + +.#{$prefix}frame-shadow * { + padding: 0; + border: 0; + margin: 0; + clear: none; + zoom: 1; +} + +/* top bottom */ +.#{$prefix}frame-shadow .xstc, +.#{$prefix}frame-shadow .xsbc { + height: 6px; + float: left; +} + +.#{$prefix}frame-shadow .xsc { + width: 100%; +} + +.#{$prefix}frame-shadow .xsml { + background: transparent repeat-y 0 0; +} + +.#{$prefix}frame-shadow .xsmr { + background: transparent repeat-y -6px 0; +} + +.#{$prefix}frame-shadow .xstl { + background: transparent no-repeat 0 0; +} + +.#{$prefix}frame-shadow .xstc { + background: transparent repeat-x 0 -30px; +} + +.#{$prefix}frame-shadow .xstr { + background: transparent repeat-x 0 -18px; +} + +.#{$prefix}frame-shadow .xsbl { + background: transparent no-repeat 0 -12px; +} + +.#{$prefix}frame-shadow .xsbc { + background: transparent repeat-x 0 -36px; +} + +.#{$prefix}frame-shadow .xsbr { + background: transparent repeat-x 0 -6px; +} +.#{$prefix}frame-shadow .xstl, +.#{$prefix}frame-shadow .xstc, +.#{$prefix}frame-shadow .xstr, +.#{$prefix}frame-shadow .xsbl, +.#{$prefix}frame-shadow .xsbc, +.#{$prefix}frame-shadow .xsbr { + width: 6px; + height: 6px; + float: left; + + @if $include-shadow-images { + @include theme-background-image($theme-name, 'shared/shadow.png'); + } +} + +.#{$prefix}frame-shadow .xsml, +.#{$prefix}frame-shadow .xsmr { + width: 6px; + float: left; + height: 100%; + + @if $include-shadow-images { + @include theme-background-image($theme-name, 'shared/shadow-lr.png'); + } +} + +.#{$prefix}frame-shadow .xsmc { + float: left; + height: 100%; + + @if $include-shadow-images { + @include theme-background-image($theme-name, 'shared/shadow-c.png'); + } +} + +.#{$prefix}frame-shadow .xst, +.#{$prefix}frame-shadow .xsb { + height: 6px; + overflow: hidden; + width: 100%; +} + +//box wrap - Ext.get("foo").boxWrap(); +.x-box-tl { + background: transparent no-repeat 0 0; + zoom:1; +} + +.x-box-tc { + height: 8px; + background: transparent repeat-x 0 0; + overflow: hidden; +} + +.x-box-tr { + background: transparent no-repeat right -8px; +} + +.x-box-ml { + background: transparent repeat-y 0; + padding-left: 4px; + overflow: hidden; + zoom:1; +} + +.x-box-mc { + background: repeat-x 0 -16px; + padding: 4px 10px; +} + +.x-box-mc h3 { + margin: 0 0 4px 0; + zoom:1; +} + +.x-box-mr { + background: transparent repeat-y right; + padding-right: 4px; + overflow: hidden; +} + +.x-box-bl { + background: transparent no-repeat 0 -16px; + zoom:1; +} + +.x-box-bc { + background: transparent repeat-x 0 -8px; + height: 8px; + overflow: hidden; +} + +.x-box-br { + background: transparent no-repeat right -24px; +} + +.x-box-tl, .x-box-bl { + padding-left: 8px; + overflow: hidden; +} + +.x-box-tr, .x-box-br { + padding-right: 8px; + overflow: hidden; +} + +.x-box-tl { + @include theme-background-image($theme-name, 'box/corners.gif'); +} + +.x-box-tc { + @include theme-background-image($theme-name, 'box/tb.gif'); +} + +.x-box-tr { + @include theme-background-image($theme-name, 'box/corners.gif'); +} + +.x-box-ml { + @include theme-background-image($theme-name, 'box/l.gif'); +} + +.x-box-mc { + background-color: #eee; + @include theme-background-image($theme-name, 'box/tb.gif'); + font-family: "Myriad Pro","Myriad Web","Tahoma","Helvetica","Arial",sans-serif; + color: #393939; + font-size: 15px; +} + +.x-box-mc h3 { + font-size: 18px; + font-weight: bold; +} + +.x-box-mr { + @include theme-background-image($theme-name, 'box/r.gif'); +} + +.x-box-bl { + @include theme-background-image($theme-name, 'box/corners.gif'); +} + +.x-box-bc { + @include theme-background-image($theme-name, 'box/tb.gif'); +} + +.x-box-br { + @include theme-background-image($theme-name, 'box/corners.gif'); +} + +.x-box-blue .x-box-bl, .x-box-blue .x-box-br, .x-box-blue .x-box-tl, .x-box-blue .x-box-tr { + @include theme-background-image($theme-name, 'box/corners-blue.gif'); +} + +.x-box-blue .x-box-bc, .x-box-blue .x-box-mc, .x-box-blue .x-box-tc { + @include theme-background-image($theme-name, 'box/tb-blue.gif'); +} + +.x-box-blue .x-box-mc { + background-color: #c3daf9; +} + +.x-box-blue .x-box-mc h3 { + color: #17385b; +} + +.x-box-blue .x-box-ml { + @include theme-background-image($theme-name, 'box/l-blue.gif'); +} + +.x-box-blue .x-box-mr { + @include theme-background-image($theme-name, 'box/r-blue.gif'); +} diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/core/_reset.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/core/_reset.scss new file mode 100644 index 000000000..47792d6a9 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/core/_reset.scss @@ -0,0 +1,136 @@ +@if $scope-reset-css { + .#{$prefix}reset { + html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, + h4, h5, h6, pre, code, form, fieldset, legend, + input, textarea, p, blockquote, th, td { + margin:0; + padding:0; + } + + table { + border-collapse:collapse; + border-spacing:0; + } + + fieldset, img { + border:0; + } + + address, caption, cite, code, + dfn, em, strong, th, var { + font-style:normal; + font-weight:normal; + } + + li { + list-style:none; + } + + caption, th { + text-align:left; + } + + h1, h2, h3, h4, h5, h6 { + font-size: 100%; + } + + q:before, + q:after { + content:""; + } + + abbr, acronym { + border:0; + font-variant:normal; + } + + sup { + vertical-align:text-top; + } + + sub { + vertical-align:text-bottom; + } + + input, textarea, select { + font-family:inherit; + font-size:inherit; + font-weight:inherit; + } + + *:focus { + outline:none; + } + } +} +@else { + html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, + h4, h5, h6, pre, code, form, fieldset, legend, + input, textarea, p, blockquote, th, td { + margin:0; + padding:0; + } + + table { + border-collapse:collapse; + border-spacing:0; + } + + fieldset, img { + border:0; + } + + address, caption, cite, code, + dfn, em, strong, th, var { + font-style:normal; + font-weight:normal; + } + + li { + list-style:none; + } + + caption, th { + text-align:left; + } + + h1, h2, h3, h4, h5, h6 { + font-size: 100%; + } + + q:before, + q:after { + content:""; + } + + abbr, acronym { + border:0; + font-variant:normal; + } + + sup { + vertical-align:text-top; + } + + sub { + vertical-align:text-bottom; + } + + input, textarea, select { + font-family:inherit; + font-size:inherit; + font-weight:inherit; + } + + *:focus { + outline:none; + } +} + +.#{$prefix}border-box .#{$prefix}reset, +.#{$prefix}border-box .#{$prefix}reset * { + box-sizing:border-box; + -moz-box-sizing:border-box; + -ms-box-sizing:border-box; + -webkit-box-sizing:border-box; +} diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/layout/_layout.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/layout/_layout.scss new file mode 100644 index 000000000..df79eecdc --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/layout/_layout.scss @@ -0,0 +1,305 @@ +@mixin extjs-layout { + .#{$prefix}docked { + position: absolute; + z-index: 1; + } + + /** + * Dock Layouts + * @todo move this somewhere else? + */ + .#{$prefix}docked-top { + border-bottom-width: 0 !important; + } + + .#{$prefix}docked-bottom { + border-top-width: 0 !important; + } + + .#{$prefix}docked-left { + border-right-width: 0 !important; + } + + .#{$prefix}docked-right { + border-left-width: 0 !important; + } + + .#{$prefix}docked-noborder-top { + border-top-width: 0 !important; + } + + .#{$prefix}docked-noborder-right { + border-right-width: 0 !important; + } + + .#{$prefix}docked-noborder-bottom { + border-bottom-width: 0 !important; + } + + .#{$prefix}docked-noborder-left { + border-left-width: 0 !important; + } + + .#{$prefix}box-inner { + overflow:hidden; + + zoom:1; + + position:relative; + left:0; + top:0; + } + + .#{$prefix}box-item { + position:absolute !important; + left:0; + top:0; + } + + .#{$prefix}box-layout-ct, + .#{$prefix}border-layout-ct { + overflow: hidden; + zoom: 1; + } + + .#{$prefix}overflow-hidden { + overflow:hidden !important; + } + + .#{$prefix}inline-children > * { + display: inline-block !important; + } + + .#{$prefix}abs-layout-item { + position: absolute; + } + + .#{$prefix}border-layout-ct { + background-color: $border-layout-ct-background; + } + + .#{$prefix}border-region-slide-in { + z-index: 5; + } + + .#{$prefix}region-collapsed-placeholder { + z-index: 4; + } + + .#{$prefix}accordion-hd .#{$prefix}panel-header-text { + color: $accordion-header-color; + font-weight: normal; + } + + .#{$prefix}accordion-hd { + .#{$prefix}tool-collapse-top, + .#{$prefix}tool-collapse-right, + .#{$prefix}tool-collapse-bottom, + .#{$prefix}tool-collapse-left { + background-position: 0 -255px; + } + + .#{$prefix}tool-expand-top, + .#{$prefix}tool-expand-right, + .#{$prefix}tool-expand-bottom, + .#{$prefix}tool-expand-left { + background-position: 0 -240px; + } + + .#{$prefix}tool-over { + .#{$prefix}tool-collapse-top, + .#{$prefix}tool-collapse-right, + .#{$prefix}tool-collapse-bottom, + .#{$prefix}tool-collapse-left { + background-position: -15px -255px; + } + } + + .#{$prefix}tool-over { + .#{$prefix}tool-expand-top, + .#{$prefix}tool-expand-right, + .#{$prefix}tool-expand-bottom, + .#{$prefix}tool-expand-left { + background-position: -15px -240px; + } + } + + background: $accordion-header-background-color !important; + @include single-box-shadow($accordion-header-background-color, 0, 0, 0, 0, true); + } + + .#{$prefix}accordion-hd { + border-width: 1px 0 1px 0 !important; + padding: 4px 5px 5px 5px; + border-top-color: $panel-header-inner-border-color !important; + } + + .#{$prefix}accordion-body { + border-width: 0 !important; + } + + .#{$prefix}accordion-hd-sibling-expanded { + border-top-color: $panel-border-color !important; + @include single-box-shadow($panel-header-inner-border-color, 0, 1px, 0, 0, true); + } + + .#{$prefix}accordion-hd-last-collapsed { + border-bottom-color: $accordion-header-background-color !important; + } + + .#{$prefix}frame-tl, + .#{$prefix}frame-tr, + .#{$prefix}frame-tc, + .#{$prefix}frame-bl, + .#{$prefix}frame-br, + .#{$prefix}frame-bc { + overflow: hidden; + background-repeat: no-repeat; + } + + .#{$prefix}frame-tc, + .#{$prefix}frame-bc { + background-repeat: repeat-x; + } + + .#{$prefix}frame-mc { + position: relative; + background-repeat: repeat-x; + overflow: hidden; + } + + // Classes for horizontal Box layout scroller. + // Uses the *TAB* scroller image because it's all we have. + // This will not work well in other cases + .#{$prefix}box-scroller-left { + float: left; + height: 100%; + + z-index: 5; + + .#{$prefix}toolbar-scroll-left, + .#{$prefix}tabbar-scroll-left { + width: 18px; + position: relative; + cursor: pointer; + height: $tab-height; + background: transparent no-repeat -18px 0; + @include theme-background-image($theme-name, 'tab-bar/scroll-left.gif'); + } + .#{$prefix}toolbar-scroll-left-hover { + background-position: 0 0; + } + .#{$prefix}toolbar-scroll-left-disabled, + .#{$prefix}tabbar-scroll-left-disabled { + background-position: -18px 0; + @include opacity(.5); + + cursor:default; + } + + .#{$prefix}toolbar-scroll-left { + @include theme-background-image($theme-name, 'toolbar/scroll-left.gif'); + background-position: -14px 0; + } + .#{$prefix}toolbar-scroll-left-hover { + background-position: 0 0; + } + .#{$prefix}toolbar-scroll-left-disabled { + background-position: -14px 0; + } + + .#{$prefix}toolbar-scroll-left { + width: 14px; + height: 22px; + + border-bottom: 1px solid #8db2e3; + } + } + + .#{$prefix}horizontal-box-overflow-body { + float: left; + } + .#{$prefix}box-scroller-right { + float: right; + height: 100%; + + z-index: 5; + + .#{$prefix}toolbar-scroll-right, + .#{$prefix}tabbar-scroll-right { + width: 18px; + position: relative; + cursor: pointer; + height: $tab-height; + background: transparent no-repeat 0 0; + @include theme-background-image($theme-name, 'tab-bar/scroll-right.gif'); + } + .#{$prefix}toolbar-scroll-right-hover { + background-position: -18px 0; + } + .#{$prefix}toolbar-scroll-right-disabled, + .#{$prefix}tabbar-scroll-right-disabled { + background-position: 0 0; + @include opacity(.5); + + cursor:default; + } + + .#{$prefix}toolbar-scroll-right { + @include theme-background-image($theme-name, 'toolbar/scroll-right.gif'); + } + .#{$prefix}toolbar-scroll-right-hover { + background-position: -14px 0; + } + .#{$prefix}toolbar-scroll-right-disabled { + background-position: 0 0; + } + + .#{$prefix}toolbar-scroll-right { + width: 14px; + height: 22px; + + border-bottom: 1px solid #8db2e3; + } + } + +// Classes for vertical Box layout scroller + .#{$prefix}box-scroller-top { + .#{$prefix}box-scroller { + line-height: 0; + font-size: 0; + } + .#{$prefix}menu-scroll-top { + background: transparent no-repeat center center; + @include theme-background-image($theme-name, 'layout/mini-top.gif'); + height: 8px; + cursor: pointer; + } + } + .#{$prefix}box-scroller-bottom { + .#{$prefix}box-scroller { + line-height: 0; + font-size: 0; + } + .#{$prefix}menu-scroll-bottom { + background: transparent no-repeat center center; + @include theme-background-image($theme-name, 'layout/mini-bottom.gif'); + height: 8px; + cursor: pointer; + } + } + + .#{$prefix}box-menu-right { + float: right; + padding-right: $toolbar-horizontal-spacing; + } + + .#{$prefix}column { + float: left; + } + @if $include-ie { + .#{$prefix}ie6 .#{$prefix}column { + display: inline; /*prevent IE6 double-margin bug*/ + } + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/mixins/_background-gradient.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/mixins/_background-gradient.scss new file mode 100644 index 000000000..c37681f59 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/mixins/_background-gradient.scss @@ -0,0 +1,122 @@ +/** + * @mixin background-gradient + * + * @param {Color} $background-color The background color of the gradient + * @param {String/List} $type The type of gradient to be used. Can either be a String which is a predefined gradient, or it can + * can be a list of color_stops. If none is set, it will still set the `background-color` to the $background-color. + * @param {String} $direction The direction of the gradient. Can either me `top` or `left`. (defaults to `top`) + */ +@mixin background-gradient($bg-color, $type: $base-gradient, $direction: top) { + background-image: none; + background-color: $bg-color; + + @if $base-gradient != null and $bg-color != transparent { + //color_stops + @if type-of($type) == "list" { + @include background-image(linear-gradient($direction, $type)); + } + + //default gradients + @else if $type == bevel { + @include background-image(linear-gradient($direction, color_stops( + lighten($bg-color, 15%), + lighten($bg-color, 8%) 30%, + $bg-color 65%, + darken($bg-color, 6%) + ))); + } @else if $type == glossy { + @include background-image(linear-gradient($direction, color_stops(lighten($bg-color, 15%), lighten($bg-color, 5%) 50%, $bg-color 51%, darken($bg-color, 5%)))); + } @else if $type == recessed { + @include background-image(linear-gradient($direction, color_stops(darken($bg-color, 10%), darken($bg-color, 5%) 10%, $bg-color 65%, lighten($bg-color, .5%)))); + } @else if $type == matte { + @include background-image(linear-gradient($direction, color_stops(lighten($bg-color, 3%), darken($bg-color, 4%)))); + } @else if $type == matte-reverse { + @include background-image(linear-gradient($direction, color_stops(darken($bg-color, 6%), lighten($bg-color, 4%)))); + } @else if $type == glossy-toolbar { + @include background-image(linear-gradient($direction, color_stops(#F0F5FA, #DAE6F4 2%, #CEDDEF))); + } + + //ext3.3 gradients + @else if $type == panel-header { + @include background-image(linear-gradient($direction, color_stops( + adjust-color($bg-color, $hue: -0.857deg, $saturation: -1.63%, $lightness: 3.529%), + adjust-color($bg-color, $hue: 0.158deg, $saturation: -1.21%, $lightness: 0.392%) 45%, + adjust-color($bg-color, $hue: 1.154deg, $saturation: 0.607%, $lightness: -7.647%) 46%, + adjust-color($bg-color, $hue: 1.154deg, $saturation: 0.607%, $lightness: -7.647%) 50%, + adjust-color($bg-color, $hue: 1.444deg, $saturation: -1.136%, $lightness: -4.706%) 51%, + $bg-color + ))); + } @else if $type == tabbar { + @include background-image(linear-gradient($direction, color_stops( + adjust-color($bg-color, $hue: 0.0deg, $saturation: 1.604%, $lightness: 4.706%), + $bg-color + ))); + } @else if $type == tab { + @include background-image(linear-gradient($direction, color_stops( + adjust-color($bg-color, $hue: 1.382deg, $saturation: -18.571%, $lightness: -4.902%), + adjust-color($bg-color, $hue: 0.43deg, $saturation: -10.311%, $lightness: -2.157%) 25%, + $bg-color 45% + ))); + } @else if $type == tab-active { + @include background-image(linear-gradient($direction, color_stops( + adjust-color($bg-color, $hue: -212.903deg, $saturation: -88.571%, $lightness: 6.863%), + adjust-color($bg-color, $hue: 0.43deg, $saturation: -6.753%, $lightness: 4.706%) 25%, + $bg-color 45% + ))); + } @else if $type == tab-over { + @include background-image(linear-gradient($direction, color_stops( + adjust-color($bg-color, $hue: 4.462deg, $saturation: -9.524%, $lightness: -3.725%), + adjust-color($bg-color, $hue: 2.272deg, $saturation: 0.0%, $lightness: -1.569%) 25%, + $bg-color 45% + ))); + } @else if $type == tab-disabled { + @include background-image(linear-gradient($direction, color_stops( + $bg-color, + adjust-color($bg-color, $hue: -0.267deg, $saturation: 18.571%, $lightness: 2.941%) + ))); + } @else if $type == grid-header { + @include background-image(linear-gradient($direction, color_stops( + adjust-color($bg-color, $hue: 0deg, $saturation: 0%, $lightness: 20.392%), + adjust-color($bg-color, $hue: 220.0deg, $saturation: 5.66%, $lightness: 12.353%) + ))); + } @else if $type == grid-header-over { + @include background-image(linear-gradient($direction, color_stops( + adjust-color($bg-color, $hue: 0.175deg, $saturation: 0.967%, $lightness: 14.118%), + adjust-color($bg-color, $hue: 0.175deg, $saturation: 0.967%, $lightness: 14.118%) 39%, + adjust-color($bg-color, $hue: 0.372deg, $saturation: 0.101%, $lightness: 10.196%) 40%, + adjust-color($bg-color, $hue: 0.372deg, $saturation: 0.101%, $lightness: 10.196%) + ))); + } @else if $type == grid-row-over { + @include background-image(linear-gradient($direction, color_stops( + adjust-color($bg-color, $hue: 0.175deg, $saturation: 0.967%, $lightness: 14.118%), + $bg-color + ))); + } @else if $type == grid-cell-special { + @include background-image(linear-gradient(left, color_stops( + $bg-color, + darken($bg-color, 5) + ))); + } @else if $type == glossy-button or $type == glossy-button-disabled { + @include background-image(linear-gradient($direction, color_stops( + $bg-color, + adjust-color($bg-color, $hue: 0deg, $saturation: 0%, $lightness: -2.353%) 48%, + adjust-color($bg-color, $hue: 0deg, $saturation: 0%, $lightness: -11.373%) 52%, + adjust-color($bg-color, $hue: 0deg, $saturation: 0%, $lightness: -9.412%) + ))); + } @else if $type == glossy-button-over { + @include background-image(linear-gradient($direction, color_stops( + $bg-color, + adjust-color($bg-color, $hue: 1.754deg, $saturation: 0.0%, $lightness: -2.157%) 48%, + adjust-color($bg-color, $hue: 5.833deg, $saturation: -35.135%, $lightness: -9.216%) 52%, + adjust-color($bg-color, $hue: 5.833deg, $saturation: -27.273%, $lightness: -7.647%) + ))); + } @else if $type == glossy-button-pressed { + @include background-image(linear-gradient($direction, color_stops( + $bg-color, + adjust-color($bg-color, $hue: -1.839deg, $saturation: -2.18%, $lightness: 2.157%) 48%, + adjust-color($bg-color, $hue: -2.032deg, $saturation: 37.871%, $lightness: -4.706%) 52%, + adjust-color($bg-color, $hue: -1.641deg, $saturation: 36.301%, $lightness: -2.549%) + ))); + } + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/mixins/_color-by-background.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/mixins/_color-by-background.scss new file mode 100644 index 000000000..c10eab11a --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/mixins/_color-by-background.scss @@ -0,0 +1,23 @@ +/** + * + */ +@mixin color-by-background($bg-color, $contrast: 70%, $default-color: null, $bevel-text: true) { + @if ($default-color != null) { + color: $default-color; + } @else { + @if (lightness($bg-color) > 40) { + color: darken($bg-color, $contrast); + } + @else { + color: lighten($bg-color, $contrast) + } + } + + @if ($bevel-text != false) { + @if (lightness($bg-color) < 40) { + @include text-shadow(rgba(0,0,0,.5) 0 -1px 0); + } @else { + @include text-shadow(rgba(255,255,255,.25) 0 1px 0); + } + } +} diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/mixins/_frame.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/mixins/_frame.scss new file mode 100644 index 000000000..171c3071c --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/mixins/_frame.scss @@ -0,0 +1,205 @@ +@mixin x-frame( + $cls, + $ui: null, + $border-radius: 0px, + $border-width: 0px, + $padding: null, + $background-color: null, + $background-gradient: null, + $table: false, + $background-direction: top +) { + $cls-ui: $cls; + @if $ui != null { + $cls-ui: $cls + '-' + $ui; + } + + $vertical: false; + @if $background-direction == left or $background-direction == right { + $vertical: true; + } + + $frame-top: max(top($border-radius), right($border-radius)); + $frame-right: max(right($border-radius), bottom($border-radius)); + $frame-bottom: max(bottom($border-radius), left($border-radius)); + $frame-left: max(left($border-radius), top($border-radius)); + + $padding-top: 0; + $padding-right: 0; + $padding-bottom: 0; + $padding-left: 0; + + @if $padding == null { + $padding-top: $frame-top - top($border-width); + $padding-right: $frame-right - right($border-width); + $padding-bottom: $frame-bottom - bottom($border-width); + $padding-left: $frame-left - left($border-width); + } + @else { + $padding-top: top($padding); + $padding-right: right($padding); + $padding-bottom: bottom($padding); + $padding-left: left($padding); + } + + @if $padding-top < $frame-top { + $padding-top: $frame-top - top($border-width); + } + @if $padding-right < $frame-right { + $padding-right: $frame-right - right($border-width); + } + @if $padding-bottom < $frame-bottom { + $padding-bottom: $frame-bottom - bottom($border-width); + } + @if $padding-left < $frame-left { + $padding-left: $frame-left - left($border-width); + } + + .#{$prefix}#{$cls-ui} { + @if $supports-border-radius { + @if length($border-radius) == 2 { + @include border-top-left-radius(nth($border-radius, 1)); + @include border-top-right-radius(nth($border-radius, 2)); + } @else if length($border-radius) == 3 { + @include border-top-left-radius(nth($border-radius, 1)); + @include border-top-right-radius(nth($border-radius, 2)); + @include border-bottom-right-radius(nth($border-radius, 3)); + } @else if length($border-radius) == 4 { + @include border-top-left-radius(nth($border-radius, 1)); + @include border-top-right-radius(nth($border-radius, 2)); + @include border-bottom-right-radius(nth($border-radius, 3)); + @include border-bottom-left-radius(nth($border-radius, 4)); + } @else { + @include border-radius($border-radius); + } + } + padding: $padding-top $padding-right $padding-bottom $padding-left; + border-width: $border-width; + border-style: solid; + @if $background-color != null { + @if $supports-gradients and $background-gradient != null { + @include background-gradient($background-color, $background-gradient, $background-direction); + } + @else { + background-color: $background-color; + } + } + } + + @if not $supports-gradients or $compile-all { + .#{$prefix}nlg { + .#{$prefix}#{$cls-ui}-mc { + @if $background-gradient != null { + @include theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-bg.gif', false, $relative-image-path-for-uis); + } + @if $background-color != null { + background-color: $background-color; + } + } + } + } + + @if not $supports-border-radius or $compile-all { + .#{$prefix}nbr { + .#{$prefix}#{$cls-ui} { + padding: 0 !important; + border-width: 0 !important; + @include border-radius(0px); + @if $background-color != null { + background-color: transparent; + } + @else { + background: #fff; + } + + @function pad($radius) { + $radius: boxmax($radius); + $radius: parseint($radius); + @if $radius > 10 { + @return $radius; + } + @else { + @return "0" + $radius; + } + } + + $type: '100'; + @if $table == true { + $type: '110'; + } + $direction: '100'; + @if $vertical == true { + $direction: '110'; + } + + $left: $type + pad(top($border-radius)) + pad(right($border-radius)) + 'px'; + $top: $direction + pad(bottom($border-radius)) + pad(left($border-radius)) + 'px'; + background-position: unquote($left) unquote($top); + } + + .#{$prefix}#{$cls-ui}-tl, + .#{$prefix}#{$cls-ui}-bl, + .#{$prefix}#{$cls-ui}-tr, + .#{$prefix}#{$cls-ui}-br, + .#{$prefix}#{$cls-ui}-tc, + .#{$prefix}#{$cls-ui}-bc, + .#{$prefix}#{$cls-ui}-ml, + .#{$prefix}#{$cls-ui}-mr { + zoom:1; + + @if $background-color != transparent { + @include theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-corners.gif', false, $relative-image-path-for-uis); + } + } + + @if $vertical == true { + .#{$prefix}#{$cls-ui}-tc, + .#{$prefix}#{$cls-ui}-bc { + zoom:1; + + @if $background-color != transparent { + @include theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis); + background-position: 0 0; + background-repeat: repeat-x; + } + } + } @else { + .#{$prefix}#{$cls-ui}-ml, + .#{$prefix}#{$cls-ui}-mr { + zoom:1; + + @if $background-color != transparent { + @include theme-background-image($theme-name, '#{$cls}/#{$cls-ui}-sides.gif', false, $relative-image-path-for-uis); + background-position: 0 0; + @if $background-gradient == null { + background-repeat: repeat-y; + } + } + } + } + + $padding-top: $padding-top - $frame-top; + $padding-right: $padding-right - $frame-right; + $padding-bottom: $padding-bottom - $frame-bottom; + $padding-left: $padding-left - $frame-left; + + + @if $padding-top < 0 { + $padding-top: 0; + } + @if $padding-right < 0 { + $padding-right: 0; + } + @if $padding-bottom < 0 { + $padding-bottom: 0; + } + @if $padding-left < 0 { + $padding-left: 0; + } + + .#{$prefix}#{$cls-ui}-mc { + padding: $padding-top $padding-right $padding-bottom $padding-left; + } + } + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/mixins/_inner-border.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/mixins/_inner-border.scss new file mode 100644 index 000000000..e1f09d00a --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/mixins/_inner-border.scss @@ -0,0 +1,149 @@ +@function inner-border-spread($width) { + $top: top($width); + $right: right($width); + $bottom: bottom($width); + $left: left($width); + + @return min(($top + $bottom) / 2, ($left + $right) / 2); +} + +@function inner-border-hoff($width, $spread) { + $left: left($width); + $right: right($width); + + @if $right <= 0 { + @return $left - $spread; + } + @else { + @return $spread - $right; + } +} + +@function inner-border-voff($width, $spread) { + $top: top($width); + $bottom: bottom($width); + + @if $bottom <= 0 { + @return $top - $spread; + } + @else { + @return $spread - $bottom; + } +} + +@function even($number) { + @return ceil($number / 2) == ($number / 2); +} + +@function odd($number) { + @return ceil($number / 2) != ($number / 2); +} + +@function inner-border-usesingle-width($width) { + $top: top($width); + $right: right($width); + $bottom: bottom($width); + $left: left($width); + + @if $top == 0 { + @if $left + $right == 0 { + @return true; + } + @if $bottom >= $left + $right { + @return true; + } + } + + @if $bottom == 0 { + @if $left + $right == 0 { + @return true; + } + @if $top >= $left + $right { + @return true; + } + } + + @if $left == 0 { + @if $top + $bottom == 0 { + @return true; + } + @if $right >= $top + $bottom { + @return true; + } + } + + @if $right == 0 { + @if $top + $bottom == 0 { + @return true; + } + @if $left >= $top + $bottom { + @return true; + } + } + + @if $top + $bottom == $left + $right and even($top) == even($bottom) and even($left) == even($right) { + @return true; + } + + @return false; +} + +@function inner-border-usesingle-color($color) { + $top: top($color); + $right: right($color); + $bottom: bottom($color); + $left: left($color); + + @if $top == $right == $bottom == $left { + @return true; + } + + @return false; +} + +@function inner-border-usesingle($width, $color) { + @if inner-border-usesingle-color($color) and inner-border-usesingle-width($width) { + @return true; + } + @return false; +} + +@mixin inner-border($width: 1px, $color: #fff, $blur: 0px) { + @if inner-border-usesingle($width, $color) { + $spread: inner-border-spread($width); + $hoff: inner-border-hoff($width, $spread); + $voff: inner-border-voff($width, $spread); + @include single-box-shadow($color-top, $hoff, $voff, $blur, $spread, true); + } + @else { + $width-top: top($width); + $width-right: right($width); + $width-bottom: bottom($width); + $width-left: left($width); + + $color-top: top($color); + $color-right: right($color); + $color-bottom: bottom($color); + $color-left: left($color); + + $shadow-top: false; + $shadow-right: false; + $shadow-bottom: false; + $shadow-left: false; + + @if $width-top > 0 { + $shadow-top: $color-top 0 $width-top $blur 0 inset; + } + @if $width-right > 0 { + $shadow-right: $color-right (-1 * $width-right) 0 $blur 0 inset; + } + @if $width-bottom > 0 { + $shadow-bottom: $color-bottom 0 (-1 * $width-bottom) $blur 0 inset; + } + @if $width-left > 0 { + $shadow-left: $color-left $width-left 0 $blur 0 inset; + } + + @include box-shadow($shadow-top, $shadow-bottom, $shadow-right, $shadow-left); + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/mixins/_theme-background-image.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/mixins/_theme-background-image.scss new file mode 100644 index 000000000..f673f4df4 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/mixins/_theme-background-image.scss @@ -0,0 +1,24 @@ +/** + * Method which inserts a full background-image property for a theme image. + * It checks if the file exists and if it doesn't, it'll throw an error. + * By default it will not include the background-image property if it is not found, + * but this can be changed by changing the default value of $include-missing-images to + * be true. + */ +@mixin theme-background-image($theme-name, $path, $without-url: false, $relative: false) { + $exists_image: theme-image($theme-name, $path, true, false); + + @if $exists_image { + $exists: theme_image_exists($exists_image); + + @if $exists or $include-missing-images { + background-image: theme-image($theme-name, $path, $without-url, $relative); + } + @else { + @warn "@theme-background-image: Theme image not found: #{$exists_image}"; + } + } + @else { + @warn "@theme-background-image: No arguments passed"; + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_dragdrop.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_dragdrop.scss new file mode 100644 index 000000000..135f61eae --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_dragdrop.scss @@ -0,0 +1,76 @@ +@mixin extjs-dragdrop { + .#{$prefix}dd-drag-proxy { + + } + + .#{$prefix}dd-drag-repair { + .#{$prefix}dd-drag-ghost { + @include opacity(.6); + } + + .#{$prefix}dd-drop-icon { + display: none; + } + } + + .#{$prefix}dd-drag-ghost { + @include opacity(.85); + + padding: 5px; + padding-left: 20px; + + white-space: nowrap; + + color: #000; + font: normal ceil($font-size * .9) $font-family; + + border: 1px solid; + border-color: #ddd #bbb #bbb #ddd; + + background-color: #fff; + } + + .#{$prefix}dd-drop-icon { + position: absolute; + top: 3px; + left: 3px; + + display: block; + + width: 16px; + height: 16px; + + background-color: transparent; + background-position: center; + background-repeat: no-repeat; + + z-index: 1; + } + + .#{$prefix}view-selector { + position: absolute; + left: 0; + top: 0; + + width: 0; + + background-color: #c3daf9; + border: 1px dotted #3399bb; + + @include opacity(.5); + + zoom: 1; + } + + .#{$prefix}dd-drop-nodrop .#{$prefix}dd-drop-icon { + @include theme-background-image($theme-name, 'dd/drop-no.gif'); + } + + .#{$prefix}dd-drop-ok .#{$prefix}dd-drop-icon { + @include theme-background-image($theme-name, 'dd/drop-yes.gif'); + } + + .#{$prefix}dd-drop-ok-add .#{$prefix}dd-drop-icon { + @include theme-background-image($theme-name, 'dd/drop-add.gif'); + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_focus.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_focus.scss new file mode 100644 index 000000000..eeca01038 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_focus.scss @@ -0,0 +1,37 @@ +.#{$prefix}focus-element { + position: absolute; + top: -10px; + left: -10px; + width: 0px; + height: 0px; +} + +.#{$prefix}focus-frame { + position: absolute; + left: 0px; + top: 0px; + z-index: 100000000; + width: 0px; + height: 0px; +} + +.#{$prefix}focus-frame-top, +.#{$prefix}focus-frame-bottom, +.#{$prefix}focus-frame-left, +.#{$prefix}focus-frame-right { + position: absolute; + top: 0px; + left: 0px; +} + +.#{$prefix}focus-frame-top, +.#{$prefix}focus-frame-bottom { + border-top: $focus-frame-style $focus-frame-width $focus-frame-color; + height: $focus-frame-width; +} + +.#{$prefix}focus-frame-left, +.#{$prefix}focus-frame-right { + border-left: $focus-frame-style $focus-frame-width $focus-frame-color; + width: $focus-frame-width; +} diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_messagebox.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_messagebox.scss new file mode 100644 index 000000000..59844ec98 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_messagebox.scss @@ -0,0 +1,50 @@ +@mixin extjs-messagebox { + .#{$prefix}message-box .#{$prefix}window-body { + background-color: $window-background-color; + border: none; + } + + .#{$prefix}message-box .ext-mb-textarea { + margin-top: 4px; + } + + .#{$prefix}message-box .#{$prefix}progress-wrap { + margin-top: 4px; + } + + .#{$prefix}message-box .ext-mb-icon { + width: 47px; + height: 32px; + } + + .#{$prefix}message-box .ext-mb-info, + .#{$prefix}message-box .ext-mb-warning, + .#{$prefix}message-box .ext-mb-question, + .#{$prefix}message-box .ext-mb-error { + background: transparent no-repeat top left; + } + + .ext-gecko2 .ext-mb-fix-cursor { + overflow: auto; + } + + .#{$prefix}message-box .#{$prefix}msg-box-wait { + @include theme-background-image($theme-name, 'shared/blue-loading.gif'); + } + + .#{$prefix}message-box .ext-mb-info { + @include theme-background-image($theme-name, 'shared/icon-info.gif'); + } + + .#{$prefix}message-box .ext-mb-warning { + @include theme-background-image($theme-name, 'shared/icon-warning.gif'); + } + + .#{$prefix}message-box .ext-mb-question { + @include theme-background-image($theme-name, 'shared/icon-question.gif'); + } + + .#{$prefix}message-box .ext-mb-error { + @include theme-background-image($theme-name, 'shared/icon-error.gif'); + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_resizable.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_resizable.scss new file mode 100644 index 000000000..96205c0b1 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_resizable.scss @@ -0,0 +1,222 @@ +@mixin extjs-resizable { + .#{$prefix}resizable-handle { + position: absolute; + + z-index: 100; + + font-size: 1px; + line-height: 6px; + + overflow: hidden; + + zoom: 1; + + @include opacity(0); + + background-color: #fff; + } + + .#{$prefix}resizable-handle-east { + width: 6px; + height: 100%; + + right: 0; + top: 0; + } + + .#{$prefix}resizable-over { + .#{$prefix}resizable-handle-east { + cursor: e-resize; + } + } + + .#{$prefix}resizable-handle-south { + width: 100%; + height: 6px; + + left: 0; + bottom: 0; + } + + .#{$prefix}resizable-over { + .#{$prefix}resizable-handle-south { + cursor: s-resize; + } + } + + .#{$prefix}resizable-handle-west { + width: 6px; + height: 100%; + + left: 0; + top: 0; + } + + .#{$prefix}resizable-over { + .#{$prefix}resizable-handle-west { + cursor: w-resize; + } + } + + .#{$prefix}resizable-handle-north { + width: 100%; + height: 6px; + + left: 0; + top: 0; + } + + .#{$prefix}resizable-over { + .#{$prefix}resizable-handle-north { + cursor: n-resize; + } + } + + .#{$prefix}resizable-handle-southeast { + width: 6px; + height: 6px; + + right: 0; + bottom: 0; + + z-index: 101; + } + + .#{$prefix}resizable-over { + .#{$prefix}resizable-handle-southeast { + cursor: se-resize; + } + } + + .#{$prefix}resizable-handle-northwest { + width: 6px; + height: 6px; + + left: 0; + top: 0; + + z-index: 101; + } + + .#{$prefix}resizable-over { + .#{$prefix}resizable-handle-northwest { + cursor: nw-resize; + } + } + + .#{$prefix}resizable-handle-northeast { + width: 6px; + height: 6px; + + right: 0; + top: 0; + + z-index: 101; + } + + .#{$prefix}resizable-over { + .#{$prefix}resizable-handle-northeast { + cursor: ne-resize; + } + } + + .#{$prefix}resizable-handle-southwest { + width: 6px; + height: 6px; + + left: 0; + bottom: 0; + + z-index: 101; + } + + .#{$prefix}resizable-over { + .#{$prefix}resizable-handle-southwest { + cursor: sw-resize; + } + } + + /*IE rounding error*/ + .#{$prefix}ie { + .#{$prefix}resizable-handle-east { + margin-right: -1px; /*IE rounding error*/ + } + + .#{$prefix}resizable-handle-south { + margin-bottom: -1px; + } + } + + .#{$prefix}resizable-over .#{$prefix}resizable-handle, .#{$prefix}resizable-pinned .#{$prefix}resizable-handle{ + @include opacity(1); + } + + .#{$prefix}window .#{$prefix}window-handle { + @include opacity(0); + } + + .#{$prefix}window-collapsed .#{$prefix}window-handle { + display: none; + } + + .#{$prefix}resizable-proxy { + border: 1px dashed #3b5a82; + position: absolute; + left: 0; + top: 0; + overflow: hidden; + z-index: 50000; + } + + .#{$prefix}resizable-overlay { + position: absolute; + left: 0; + top: 0; + + width: 100%; + height: 100%; + + display: none; + + z-index: 200000; + + background-color: #fff; + + @include opacity(0); + } + + .#{$prefix}resizable-over, + .#{$prefix}resizable-pinned { + .#{$prefix}resizable-handle-east, + .#{$prefix}resizable-handle-west { + background-position: left; + @include theme-background-image($theme-name, 'sizer/e-handle.gif'); + } + + .#{$prefix}resizable-handle-south, + .#{$prefix}resizable-handle-north { + background-position: top; + @include theme-background-image($theme-name, 'sizer/s-handle.gif'); + } + + .#{$prefix}resizable-handle-southeast { + background-position: top left; + @include theme-background-image($theme-name, 'sizer/se-handle.gif'); + } + + .#{$prefix}resizable-handle-northwest { + background-position: bottom right; + @include theme-background-image($theme-name, 'sizer/nw-handle.gif'); + } + + .#{$prefix}resizable-handle-northeast { + background-position: bottom left; + @include theme-background-image($theme-name, 'sizer/ne-handle.gif'); + } + + .#{$prefix}resizable-handle-southwest { + background-position: top right; + @include theme-background-image($theme-name, 'sizer/sw-handle.gif'); + } + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_scroller.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_scroller.scss new file mode 100644 index 000000000..4a99cb3ab --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_scroller.scss @@ -0,0 +1,55 @@ +@mixin extjs-scroller { + .#{$prefix}horizontal-scroller-present .#{$prefix}grid-body { + border-bottom-width: 0px; + } + + .#{$prefix}vertical-scroller-present .#{$prefix}grid-body { + border-right-width: 0px; + } + + .#{$prefix}scroller { + overflow: hidden; + } + + .#{$prefix}scroller-vertical { + border: 1px solid $panel-border-color; + border-top-color: $grid-header-background-color; + } + + .#{$prefix}scroller-horizontal { + border: 1px solid $panel-border-color; + } + + .#{$prefix}vertical-scroller-present .#{$prefix}scroller-horizontal { + border-right-width: 0px; + } + + .#{$prefix}scroller-ct { + overflow: hidden; + position: absolute; + margin: 0; + padding: 0; + border: none; + left: 0px; + top: 0px; + + /* + In IE9 (only), the border-box style causes the scroller-ct to be 0px in the + perpendicular dimension and breaks the scroll as well as offsets it by the left + offset that we use to try and keep some size on this element. This works on all + browsers (including IE9). + */ + box-sizing: content-box !important; + -ms-box-sizing: content-box !important; + -moz-box-sizing: content-box !important; + -webkit-box-sizing: content-box !important; + } + + .#{$prefix}scroller-vertical .#{$prefix}scroller-ct { + overflow-y: scroll; + } + + .#{$prefix}scroller-horizontal .#{$prefix}scroller-ct { + overflow-x: scroll; + } +} diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_splitter.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_splitter.scss new file mode 100644 index 000000000..b8ae2aac3 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_splitter.scss @@ -0,0 +1,106 @@ +@mixin extjs-splitter { + .#{$prefix}splitter { + .#{$prefix}collapse-el { + position: absolute; + + cursor: pointer; + + background-color: transparent; + background-repeat: no-repeat !important; + } + } + + .#{$prefix}layout-split-left, + .#{$prefix}layout-split-right { + top: 50%; + + margin-top: -17px; + + width: 5px; + height: 35px; + } + + .#{$prefix}layout-split-top, + .#{$prefix}layout-split-bottom { + left: 50%; + + width: 35px; + height: 5px; + + margin-left: -17px; + } + + .#{$prefix}layout-split-left { + background: no-repeat top right; + @include theme-background-image($theme-name, 'util/splitter/mini-left.gif'); + } + + .#{$prefix}layout-split-right { + background: no-repeat top left; + @include theme-background-image($theme-name, 'util/splitter/mini-right.gif'); + } + + .#{$prefix}layout-split-top { + background: no-repeat top left; + @include theme-background-image($theme-name, 'util/splitter/mini-top.gif'); + } + + .#{$prefix}layout-split-bottom { + background: no-repeat top left; + @include theme-background-image($theme-name, 'util/splitter/mini-bottom.gif'); + } + + .#{$prefix}splitter-collapsed { + .#{$prefix}layout-split-left { + background: no-repeat top left; + @include theme-background-image($theme-name, 'util/splitter/mini-right.gif'); + } + + .#{$prefix}layout-split-right { + background: no-repeat top right; + @include theme-background-image($theme-name, 'util/splitter/mini-left.gif'); + } + + .#{$prefix}layout-split-top { + background: no-repeat top left; + @include theme-background-image($theme-name, 'util/splitter/mini-bottom.gif'); + } + + .#{$prefix}layout-split-bottom { + background: no-repeat top left; + @include theme-background-image($theme-name, 'util/splitter/mini-top.gif'); + } + } + + .#{$prefix}splitter-horizontal { + cursor: e-resize; + cursor: row-resize; + font-size:1px; + } + .#{$prefix}splitter-vertical { + cursor: e-resize; + cursor: col-resize; + font-size:1px; + } + .#{$prefix}splitter-collapsed { + cursor: default; + } + + .#{$prefix}splitter-active { + z-index: 4; + font-size:1px; + background-color: rgb(180, 180, 180); + @include opacity(0.8); + } + .#{$prefix}splitter-active { + .#{$prefix}collapse-el { + @include opacity(0.3); + } + } + + .#{$prefix}proxy-el { + position: absolute; + background: rgb(180, 180, 180); + @include opacity(0.8); + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_tool.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_tool.scss new file mode 100644 index 000000000..c9eb8df16 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/util/_tool.scss @@ -0,0 +1,295 @@ +@mixin extjs-tool { + .#{$prefix}tool { + height: $tool-size; + + img { + overflow: hidden; + + width: $tool-size; + height: $tool-size; + + cursor: pointer; + + background-color: transparent; + background-repeat: no-repeat; + @include theme-background-image($theme-name, 'tools/tool-sprites.gif'); + + margin: 0; + } + } + + .#{$prefix}panel-header-horizontal, + .#{$prefix}window-header-horizontal { + .#{$prefix}tool { + margin-left: 2px; + } + } + + .#{$prefix}panel-header-vertical, + .#{$prefix}window-header-vertical { + .#{$prefix}tool { + margin-bottom: 2px; + } + } + +.#{$prefix}tool-placeholder { + visibility: hidden; + } + + .#{$prefix}tool-toggle { + background-position: 0 -60px; + } + + .#{$prefix}tool-over { + .#{$prefix}tool-toggle { + background-position: -15px -60px; + } + } + + .#{$prefix}panel-collapsed, + .#{$prefix}fieldset-collapsed { + .#{$prefix}tool-toggle { + background-position: 0 -75px; + } + + .#{$prefix}tool-over { + .#{$prefix}tool-toggle { + background-position: -15px -75px; + } + } + } + + .#{$prefix}tool-close { + background-position: 0 0; + } + + .#{$prefix}tool-minimize { + background-position: 0 -15px; + } + + .#{$prefix}tool-maximize { + background-position: 0 -30px; + } + + .#{$prefix}tool-restore { + background-position: 0 -45px; + } + + .#{$prefix}tool-gear { + background-position: 0 -90px; + } + + .#{$prefix}tool-prev { + background-position: 0 -105px; + } + + .#{$prefix}tool-next { + background-position: 0 -120px; + } + + .#{$prefix}tool-pin { + background-position: 0 -135px; + } + + .#{$prefix}tool-unpin { + background-position: 0 -150px; + } + + .#{$prefix}tool-right { + background-position: 0 -165px; + } + + .#{$prefix}tool-left { + background-position: 0 -180px; + } + + .#{$prefix}tool-help { + background-position: 0 -300px; + } + + .#{$prefix}tool-save { + background-position: 0 -285px; + } + + .#{$prefix}tool-search { + background-position: 0 -270px; + } + + .#{$prefix}tool-minus { + background-position: 0 -255px; + } + + .#{$prefix}tool-plus { + background-position: 0 -240px; + } + + .#{$prefix}tool-refresh { + background-position: 0 -225px; + } + + .#{$prefix}tool-up { + background-position: 0 -210px; + } + + .#{$prefix}tool-down { + background-position: 0 -195px; + } + + .#{$prefix}tool-move { + background-position: 0 -375px; + } + + .#{$prefix}tool-resize { + background-position: 0 -360px; + } + + .#{$prefix}tool-collapse { + background-position: 0 -345px; + } + + .#{$prefix}tool-expand { + background-position: 0 -330px; + } + + .#{$prefix}tool-print { + background-position: 0 -315px; + } + + .#{$prefix}tool-expand-bottom, + .#{$prefix}tool-collapse-bottom { + background-position: 0 -195px; + } + + .#{$prefix}tool-expand-top, + .#{$prefix}tool-collapse-top { + background-position: 0 -210px; + } + + .#{$prefix}tool-expand-left, + .#{$prefix}tool-collapse-left { + background-position: 0 -180px; + } + + .#{$prefix}tool-expand-right, + .#{$prefix}tool-collapse-right { + background-position: 0 -165px; + } + + .#{$prefix}tool-over { + .#{$prefix}tool-close { + background-position: -15px 0; + } + + .#{$prefix}tool-minimize { + background-position: -15px -15px; + } + + .#{$prefix}tool-maximize { + background-position: -15px -30px; + } + + .#{$prefix}tool-restore { + background-position: -15px -45px; + } + + .#{$prefix}tool-gear { + background-position: -15px -90px; + } + + .#{$prefix}tool-prev { + background-position: -15px -105px; + } + + .#{$prefix}tool-next { + background-position: -15px -120px; + } + + .#{$prefix}tool-pin { + background-position: -15px -135px; + } + + .#{$prefix}tool-unpin { + background-position: -15px -150px; + } + + .#{$prefix}tool-right { + background-position: -15px -165px; + } + + .#{$prefix}tool-left { + background-position: -15px -180px; + } + + .#{$prefix}tool-down { + background-position: -15px -195px; + } + + .#{$prefix}tool-up { + background-position: -15px -210px; + } + + .#{$prefix}tool-refresh { + background-position: -15px -225px; + } + + .#{$prefix}tool-plus { + background-position: -15px -240px; + } + + .#{$prefix}tool-minus { + background-position: -15px -255px; + } + + .#{$prefix}tool-search { + background-position: -15px -270px; + } + + .#{$prefix}tool-save { + background-position: -15px -285px; + } + + .#{$prefix}tool-help { + background-position: -15px -300px; + } + + .#{$prefix}tool-print { + background-position: -15px -315px; + } + + .#{$prefix}tool-expand { + background-position: -15px -330px; + } + + .#{$prefix}tool-collapse { + background-position: -15px -345px; + } + + .#{$prefix}tool-resize { + background-position: -15px -360px; + } + + .#{$prefix}tool-move { + background-position: -15px -375px; + } + + .#{$prefix}tool-expand-bottom, + .#{$prefix}tool-collapse-bottom { + background-position: -15px -195px; + } + + .#{$prefix}tool-expand-top, + .#{$prefix}tool-collapse-top { + background-position: -15px -210px; + } + + .#{$prefix}tool-expand-left, + .#{$prefix}tool-collapse-left { + background-position: -15px -180px; + } + + .#{$prefix}tool-expand-right, + .#{$prefix}tool-collapse-right { + background-position: -15px -165px; + } + } +} diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_boundlist.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_boundlist.scss new file mode 100644 index 000000000..5b19d0497 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_boundlist.scss @@ -0,0 +1,18 @@ +//background +$boundlist-background-color: #fff !default; + +//borders +$boundlist-border-color: adjust-color($base-color, $hue: 0.58deg, $saturation: 25.146%, $lightness: -6.471%) !default; +$boundlist-border-width: 1px !default; +$boundlist-border-style: solid !default; + +$boundlist-item-padding: 2px !default; +$boundlist-item-border-width: 1px !default; +$boundlist-item-border-style: dotted !default; +$boundlist-item-border-color: $boundlist-background-color !default; + +$boundlist-item-over-border-color: adjust-color($base-color, $hue: 6.952deg, $saturation: 5.848%, $lightness: -6.471%) !default; +$boundlist-item-selected-border-color: darken($boundlist-item-over-border-color, 5) !default; + +$boundlist-item-over-background-color: adjust-color($base-color, $hue: 3.188deg, $saturation: 0.542%, $lightness: 7.843%) !default; +$boundlist-item-selected-background-color: darken($boundlist-item-over-background-color, 5) !default; diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_btn-group.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_btn-group.scss new file mode 100644 index 000000000..02c4af354 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_btn-group.scss @@ -0,0 +1,15 @@ +$btn-group-background-color: #d0def0 !default; +$btn-group-margin: 2px 0 !default; +$btn-group-border-color: #b7c8d7 !default; +$btn-group-border-radius: 2px !default; +$btn-group-border-width: 1px !default; +$btn-group-padding: 0 1px !default; + +$btn-group-inner-border-width: 1px !default; +$btn-group-inner-border-color: #e3ebf5 !default; + +$btn-group-header-margin: 2px 2px 0 2px !default; +$btn-group-header-font: normal ceil($font-size * .9) $font-family !default; +$btn-group-header-color: #3E6AAA !default; +$btn-group-header-padding: 1px 0 !default; +$btn-group-header-background-color: #c2d8f0 !default; diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_button.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_button.scss new file mode 100644 index 000000000..e818934ee --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_button.scss @@ -0,0 +1,141 @@ +$button-arrow-size: 12px !default; +$button-split-size: 14px !default; +$button-icon-spacing: 4px !default; + +$button-small-border-radius: 3px !default; +$button-small-border-width: 1px !default; +$button-small-padding: 2px !default; +$button-small-text-padding: 4px; +$button-small-font-size: ceil($font-size * .9) !default; //11px +$button-small-font-size-over: $button-small-font-size !default; +$button-small-font-size-focus: $button-small-font-size-over; +$button-small-font-size-pressed: $button-small-font-size !default; +$button-small-font-size-disabled: $button-small-font-size !default; +$button-small-font-weight: normal !default; +$button-small-font-weight-over: $button-small-font-weight !default; +$button-small-font-weight-focus: $button-small-font-weight-over; +$button-small-font-weight-pressed: $button-small-font-weight !default; +$button-small-font-weight-disabled: $button-small-font-weight !default; +$button-small-font-family: $font-family !default; +$button-small-font-family-over: $button-small-font-family !default; +$button-small-font-family-focus: $button-small-font-family-over; +$button-small-font-family-pressed: $button-small-font-family !default; +$button-small-font-family-disabled: $button-small-font-family !default; +$button-small-icon-size: 16px !default; + +$button-medium-border-radius: 3px !default; +$button-medium-border-width: 1px !default; +$button-medium-padding: 3px !default; +$button-medium-text-padding: 3px; +$button-medium-font-size: ceil($font-size * .9) !default; //11px +$button-medium-font-size-over: $button-medium-font-size !default; +$button-medium-font-size-focus: $button-medium-font-size-over; +$button-medium-font-size-pressed: $button-medium-font-size !default; +$button-medium-font-size-disabled: $button-medium-font-size !default; +$button-medium-font-weight: normal !default; +$button-medium-font-weight-over: $button-medium-font-weight !default; +$button-medium-font-weight-focus: $button-medium-font-weight-over; +$button-medium-font-weight-pressed: $button-medium-font-weight !default; +$button-medium-font-weight-disabled: $button-medium-font-weight !default; +$button-medium-font-family: $font-family !default; +$button-medium-font-family-over: $button-medium-font-family !default; +$button-medium-font-family-focus: $button-medium-font-family-over; +$button-medium-font-family-pressed: $button-medium-font-family !default; +$button-medium-font-family-disabled: $button-medium-font-family !default; +$button-medium-icon-size: 24px !default; + +$button-large-border-radius: 3px !default; +$button-large-border-width: 1px !default; +$button-large-padding: 3px !default; +$button-large-text-padding: 3px; +$button-large-font-size: ceil($font-size * .9) !default; //11px +$button-large-font-size-over: $button-large-font-size !default; +$button-large-font-size-focus: $button-large-font-size-over; +$button-large-font-size-pressed: $button-large-font-size !default; +$button-large-font-size-disabled: $button-large-font-size !default; +$button-large-font-weight: normal !default; +$button-large-font-weight-over: $button-large-font-weight !default; +$button-large-font-weight-focus: $button-large-font-weight-over; +$button-large-font-weight-pressed: $button-large-font-weight !default; +$button-large-font-weight-disabled: $button-large-font-weight !default; +$button-large-font-family: $font-family !default; +$button-large-font-family-over: $button-large-font-family !default; +$button-large-font-family-focus: $button-large-font-family-over; +$button-large-font-family-pressed: $button-large-font-family !default; +$button-large-font-family-disabled: $button-large-font-family !default; +$button-large-icon-size: 32px !default; + +//base colors for the default button +$button-default-base-color: adjust-color($neutral-color, $hue: 0deg, $saturation: -55.556%, $lightness: 12.745%) !default; //F7F7F7 +$button-default-base-color-over: adjust-color($base-color, $hue: -6.667deg, $saturation: 44.444%, $lightness: 10.588%) !default; //E4F3FF +$button-default-base-color-focus: $button-default-base-color-over !default; +$button-default-base-color-pressed: adjust-color($base-color, $hue: -0.725deg, $saturation: -9.556%, $lightness: -3.725%) !default; //B6CBE4 +$button-default-base-color-disabled: adjust-color($base-color, $hue: 0deg, $saturation: -55.556%, $lightness: 12.745%) !default; //F7F7F7 + +$button-default-border-color: adjust-color($button-default-base-color, $hue: 0deg, $saturation: 0%, $lightness: -18.039%) !default; +$button-default-border-color-over: adjust-color($button-default-base-color-over, $hue: 8.177deg, $saturation: -28.283%, $lightness: -12.745%) !default; +$button-default-border-color-focus: $button-default-border-color-over !default; +$button-default-border-color-pressed: adjust-color($button-default-base-color-pressed, $hue: 2.317deg, $saturation: 6.756%, $lightness: -5.294%) !default; +$button-default-border-color-disabled: adjust-color($button-default-base-color-disabled, $hue: 0deg, $saturation: 0%, $lightness: -8.627%) !default; + +$button-default-background-color: $button-default-base-color !default; +$button-default-background-color-over: $button-default-base-color-over !default; +$button-default-background-color-focus: $button-default-background-color-over !default; +$button-default-background-color-pressed: $button-default-base-color-pressed !default; +$button-default-background-color-disabled: $button-default-base-color-disabled !default; + +$button-default-background-gradient: 'glossy-button' !default; +$button-default-background-gradient-over: 'glossy-button-over' !default; +$button-default-background-gradient-focus: $button-default-background-gradient-over !default; +$button-default-background-gradient-pressed: 'glossy-button-pressed' !default; +$button-default-background-gradient-disabled: 'glossy-button-disabled' !default; + +$button-default-background-gradient-color-stops: null !default; +$button-default-background-gradient-color-stops-over: $button-default-background-gradient-color-stops !default; +$button-default-background-gradient-color-stops-focus: $button-default-background-gradient-color-stops-over !default; +$button-default-background-gradient-color-stops-pressed: $button-default-background-gradient-color-stops !default; +$button-default-background-gradient-color-stops-disabled: $button-default-background-gradient-color-stops !default; + +$button-default-color: #333 !default; +$button-default-color-over: $button-default-color !default; +$button-default-color-focus: $button-default-color-over !default; +$button-default-color-pressed: $button-default-color !default; +$button-default-color-disabled: lighten($button-default-color, 35) !default; + +/** + * Toolbar buttons + */ +$button-toolbar-arrow-size: 12px !default; +$button-toolbar-split-size: 12px !default; + +$button-toolbar-base-color: adjust-color($base-color, $hue: -213.333deg, $saturation: -55.556%, $lightness: 3.333%) !default; + +$button-toolbar-border-color: transparent !default; +$button-toolbar-border-color-over: adjust-color($base-color, $hue: 0.084deg, $saturation: -9.891%, $lightness: -18.039%) !default; +$button-toolbar-border-color-focus: $button-toolbar-border-color-over; +$button-toolbar-border-color-pressed: adjust-color($base-color, $hue: 0.721deg, $saturation: -17.014%, $lightness: -21.765%) !default; +$button-toolbar-border-color-disabled: transparent !default; + +$button-toolbar-background-color: transparent !default; +$button-toolbar-background-color-over: adjust-color($base-color, $hue: -5deg, $saturation: 44.444%, $lightness: 8.824%) !default; +$button-toolbar-background-color-focus: $button-toolbar-background-color-over; +$button-toolbar-background-color-pressed: adjust-color($base-color, $hue: -1.138deg, $saturation: -11.47%, $lightness: -2.353%) !default; +$button-toolbar-background-color-disabled: transparent !default; + +$button-toolbar-background-gradient: null !default; +$button-toolbar-background-gradient-over: 'glossy-button-over' !default; +$button-toolbar-background-gradient-focus: $button-toolbar-background-gradient-over; +$button-toolbar-background-gradient-pressed: 'glossy-button-pressed' !default; +$button-toolbar-background-gradient-disabled: null !default; + +$button-toolbar-background-gradient-color-stops: null !default; +$button-toolbar-background-gradient-color-stops-over: null !default; +$button-toolbar-background-gradient-color-stops-focus: $button-toolbar-background-gradient-color-stops-over; +$button-toolbar-background-gradient-color-stops-pressed: null !default; +$button-toolbar-background-gradient-color-stops-disabled: null !default; + +$button-toolbar-color: #333 !default; +$button-toolbar-color-over: $button-toolbar-color !default; +$button-toolbar-color-focus: $button-toolbar-color-over; +$button-toolbar-color-pressed: $button-toolbar-color !default; +$button-toolbar-color-disabled: lighten($button-toolbar-color, 35) !default; diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_core.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_core.scss new file mode 100644 index 000000000..cbaf2f01d --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_core.scss @@ -0,0 +1,114 @@ +/** + * @var {string} $prefix + * The prefix to be applied to all CSS selectors. If this is changed, it must also be changed in your + * JavaScript application. + */ +$prefix: 'x-' !default; + +/** + * @var {string} $theme-name + * The name of the theme. This must match the the output directory of the images. + * (defaults to 'default') + */ +$theme-name: 'default' !default; + +/** + * @var {boolean/string} $relative-image-path-for-uis + * True to use a relative image path for all new UIs. If true, the path will be "../images/". + * It can also be a string of the path value. + * It defaults to false, which means it will look for the images in the ExtJS SDK folder. + */ +$relative-image-path-for-uis: false !default; + +$color: #000 !default; + +/** + * @var {string} $font-family + * The default font-family to be used throughout the theme. + */ +$font-family: tahoma,arial,verdana,sans-serif !default; + +$font-size : 12px !default; + +/** + * @var {string} $base-gradient + * The base gradient to be used throughout the theme. + */ +$base-gradient: 'matte' !default; + +/** + * @var {color} $base-color + * The base color to be used throughout the theme. + */ +$base-color : #C0D4ED !default; +$neutral-color: #eeeeee !default; + +/** + * @var {boolean} $include-not-found-images + * True to include files which are not found when compiling your SASS + */ +$include-missing-images: false !default; + +/** + * @var {boolean} $include-ie + * True to include Internet Explorer specific rules + */ +$include-ie: true !default; + +/** + * @var {boolean} $include-ff + * True to include Firefox specific rules + */ +$include-ff: true !default; + +/** + * @var {boolean} $include-chrome + * True to include Chrome specific rules + */ +$include-chrome: true !default; + +/** + * @var {boolean} $include-safari + * True to include Safari specific rules + */ +$include-safari: true !default; + +/** + * @var {boolean} $include-opera + * True to include Opera specific rules + */ +$include-opera: true !default; + +/** + * @var {boolean} $include-webkit + * True to include Webkit specific rules + */ +$include-webkit: true !default; + +$supports-border-radius: true !default; +$supports-gradients: true !default; + +/** + * @var {boolean} $compile-all + * True to copile all CSS, even if above include rules are false + */ +$compile-all: true !default; + +/** + * @var {boolean} $scope-reset-css + * True to scope the reset CSS within the $prefix variable. + */ +$scope-reset-css: false !default; + +/** + * @var {color} $css-shadow-background-color + * The base color for CSS shadows + */ +$css-shadow-background-color: #ccc !default; + + +/** + * @var {color} $include-shadow-images + * True to include all shadow images. + */ +$include-shadow-images: true !default; diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_focus.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_focus.scss new file mode 100644 index 000000000..37286de39 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_focus.scss @@ -0,0 +1,3 @@ +$focus-frame-color: rgb(21, 66, 139); +$focus-frame-style: solid; +$focus-frame-width: 2px;
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_form.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_form.scss new file mode 100644 index 000000000..d1fdae1eb --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_form.scss @@ -0,0 +1,114 @@ +/** + * @class Ext.form.* + */ + +/** + * @class Ext.form.field.Base + */ + +$form-field-height: 22px !default; +$form-toolbar-field-height: 20px !default; + +//padding +$form-field-padding: 1px 3px !default; + +//fonts +$form-field-font-size: $font-size !default; + +$form-field-font-family: $font-family !default; +$form-field-font-weight: normal !default; +$form-field-font: $form-field-font-weight $form-field-font-size $form-field-font-family !default; +$form-field-color: #000 !default; + +$form-field-empty-color: gray !default; + +//border +$form-field-border-color: #B5B8C8 !default; +$form-field-border-width: 1px !default; + +$form-field-focus-border-color: adjust-color($base-color, $hue: -4.322deg, $saturation: -1.065%, $lightness: -16.863%) !default; +$form-field-invalid-border-color: #c30 !default; + +//background +$form-field-background-color: #fff !default; +$form-field-background-image: 'form/text-bg.gif' !default; + +$form-field-invalid-background-color: #fff !default; +$form-field-invalid-background-image: 'grid/invalid_line.gif' !default; +$form-field-invalid-background-repeat: repeat-x !default; +$form-field-invalid-background-position: bottom !default; + +/** + * @class Ext.form.field.TextArea + */ +$form-textarea-padding: 2px 3px !default; + +/** + * @class Ext.form.Label + */ +$form-label-font-weight: normal !default; +$form-label-font-size: $font-size !default; +$form-label-font-family: $font-family !default; +$form-label-font: $form-label-font-weight $form-label-font-size $form-label-font-family !default; + +/** + * @class Ext.form.field.Checkbox + */ +$form-checkbox-image: 'form/checkbox.gif' !default; +$form-checkbox-size: 13px !default; + +/** + * @class Ext.form.field.Radio + */ +$form-radio-image: 'form/radio.gif' !default; + + +/** + * Error messages + */ +//icons +$form-exclamation-icon: 'form/exclamation.gif' !default; + +//font +$form-error-msg-color: #c0272b !default; +$form-error-msg-font-weight: normal !default; +$form-error-msg-font-size: ceil($font-size * .9) !default; +$form-error-msg-font-family: $font-family !default; +$form-error-msg-font: $form-error-msg-font-weight $form-error-msg-font-size $form-error-msg-font-family !default; +$form-error-msg-line-height: 16px !default; + +/** + * Trigger Field + */ +$form-trigger-width: 17px !default; +$form-trigger-height: $form-field-height !default; +$form-toolbar-trigger-height: $form-toolbar-field-height !default; + +$form-trigger-border-bottom-width: 1px !default; +$form-trigger-border-bottom-style: solid !default; +$form-trigger-border-bottom-color: $form-field-border-color !default; +$form-trigger-border-bottom: $form-trigger-border-bottom-width $form-trigger-border-bottom-style $form-trigger-border-bottom-color !default; + +$form-trigger-border-bottom-color-over: adjust-color($base-color, $hue: -4.322deg, $saturation: -1.065%, $lightness: -16.863%) !default; +$form-trigger-border-bottom-color-focus: adjust-color($base-color, $hue: -4.322deg, $saturation: -1.065%, $lightness: -16.863%) !default; +$form-trigger-border-bottom-color-focus-over: null !default; +$form-trigger-border-bottom-color-pressed: null !default; + +$form-trigger-icon-background-position: 7px 6px !default; + +/** + * Fieldsets + */ +$fieldset-header-font-size: ceil($font-size * .9) !default; +$fieldset-header-font-weight: bold !default; +$fieldset-header-font-family: $font-family !default; +$fieldset-header-font: $fieldset-header-font-size $fieldset-header-font-weight $fieldset-header-font-family !default; +$fieldset-header-color: adjust-color($base-color, $hue: 3.785deg, $saturation: 18.194%, $lightness: -52.745%) !default; + +$fieldset-border-width: 1px !default; +$fieldset-border-style: solid !default; +$fieldset-border-color: $form-field-border-color !default; +$fieldset-border: $fieldset-border-width $fieldset-border-style $fieldset-border-color !default; + +$fieldset-padding: 10px !default; +$fieldset-header-padding: 0 3px !default; diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_grid.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_grid.scss new file mode 100644 index 000000000..e6fa45a3b --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_grid.scss @@ -0,0 +1,91 @@ +// =============================== +// ========= GRID BASE =========== +// =============================== +$grid-base-color: $base-color !default; + +// =============================== +// ========= GRID HEADER ========= +// =============================== +$grid-header-background-color: adjust-color($neutral-color, $hue: 0deg, $saturation: 0%, $lightness: -16.078%) !default; +$grid-header-background-gradient: 'grid-header' !default; +$grid-header-border-color: $neutral-color !default; +$grid-header-over-border-color: adjust-color(#C0D4ED, $hue: -0.175deg, $saturation: 25.296%, $lightness: -2.549%) !default; +$grid-header-over-background-color: $grid-header-over-border-color !default; +$grid-header-over-background-gradient: 'grid-header-over' !default; +$grid-header-background-color: $grid-base-color !default; +$grid-header-padding: 0px 6px !default; +$grid-header-trigger-height: 22px !default; +$grid-header-trigger-width: 14px !default; +$grid-header-color: null !default; + +// =============================== +// ========= GRID ROWS =========== +// =============================== +$grid-row-cell-color: null !default; +$grid-row-cell-font: normal ceil($font-size * .9) $font-family !default; +$grid-row-padding: 0 1px !default; + +//row wrap +$grid-row-wrap-border-color: #ededed !default; +$grid-row-wrap-border-width: 1px 0 !default; +$grid-row-wrap-border-style: solid !default; + +//row body +$grid-row-body-font: normal 11px/13px $font-family !default; +$grid-row-body-padding: 4px !default; + +//row cell +$grid-row-cell-background: #fff !default; +$grid-row-cell-border-color: $grid-row-wrap-border-color !default; +$grid-row-cell-border-style: solid !default; +$grid-row-cell-border-width: 1px 0 !default; + +//row cell alt +$grid-row-cell-alt-background: darken($grid-row-cell-background, 2) !default; + +//row cell over +$grid-row-cell-over-border-color: adjust-color($neutral-color, $hue: 0deg, $saturation: 0%, $lightness: -6.667%) !default; +$grid-row-cell-over-background-color: adjust-color($neutral-color, $hue: 0deg, $saturation: 0%, $lightness: 0.392%) !default; +$grid-row-cell-over-background-gradient: 'grid-row-over' !default; + +//row cell selected +$grid-row-cell-selected-border-style: dotted !default; +$grid-row-cell-selected-border-color: adjust-color($base-color, $hue: 6.952deg, $saturation: 5.848%, $lightness: -6.471%) !default; +$grid-row-cell-selected-background-color: adjust-color($base-color, $hue: 3.188deg, $saturation: 0.542%, $lightness: 7.843%) !default; + +//row cell focus +$grid-row-cell-focus-border-color: adjust-color($neutral-color, $hue: 0deg, $saturation: 0%, $lightness: -6.667%) !default; +$grid-row-cell-focus-background-color: adjust-color($neutral-color, $hue: 0deg, $saturation: 0%, $lightness: 0.392%) !default; +$grid-row-cell-focus-background-gradient: 'grid-row-over' !default; + +//standard cells +$grid-cell-font: normal 13px $font-family !default; +$grid-cell-inner-padding: 3px 6px !default; + +//special cell +$grid-cell-special-over-background-color: adjust-color($base-color, $hue: -0.476deg, $saturation: 25.214%, $lightness: 5.686%) !default; + +//cell with col lines +$grid-cell-with-col-lines-border-color: adjust-color($base-color, $hue: 0deg, $saturation: -55.556%, $lightness: -2.549%) !default; + +// =============================== +// ======== GROUPED GRID ========= +// =============================== +$grid-grouped-header-background-color: #fff; +$grid-grouped-header-border-width: 0 0 2px 0; +$grid-grouped-header-border-style: solid; +$grid-grouped-header-border-color: adjust-color($base-color, $hue: 0.844deg, $saturation: 7.644%, $lightness: -8.627%); +$grid-grouped-header-padding: 6px 0 0 0; + +$grid-grouped-title-color: adjust-color($base-color, $hue: 0.952deg, $saturation: -6.718%, $lightness: -41.961%); +$grid-grouped-title-font: bold ceil($font-size * .9) $font-family; +$grid-grouped-title-padding: 4px 4px 4px 17px; + +// =============================== +// ========= ROW EDITOR ========== +// =============================== +$grid-row-editor-background-color: adjust-color($base-color, $hue: 1deg, $saturation: 11%, $lightness: 11%) !default; +$grid-row-editor-border-color: $panel-border-color !default; +$grid-row-editor-border-width: 1px !default; +$grid-row-editor-border: $grid-row-editor-border-width solid $grid-row-editor-border-color !important; +$grid-row-editor-font: $grid-row-cell-font !important; diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_htmleditor.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_htmleditor.scss new file mode 100644 index 000000000..894344942 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_htmleditor.scss @@ -0,0 +1,2 @@ +$html-editor-border-color: $form-field-border-color !default; +$html-editor-background-color: $form-field-background-color !default;
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_layout.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_layout.scss new file mode 100644 index 000000000..f4de98b9a --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_layout.scss @@ -0,0 +1,5 @@ +$border-layout-ct-background: adjust-color($base-color, $hue: 3.188deg, $saturation: 0.542%, $lightness: 7.843%) !default; + +$accordion-header-color: #000 !default; +$accordion-header-background-color: #d9e7f8 !default; +$accordion-header-background-gradient: null !default;
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_loadmask.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_loadmask.scss new file mode 100644 index 000000000..7ae2271b4 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_loadmask.scss @@ -0,0 +1,17 @@ +$loadmask-opacity: 0.5 !default; +$loadmask-backgorund: #ccc !default; + +$loadmask-msg-padding: 2px !default; +$loadmask-msg-border-color: $panel-header-border-color !default; +$loadmask-msg-background-color: $panel-base-color !default; +$loadmask-msg-background-gradient: null !default; + +$loadmask-msg-inner-padding: 5px 10px 5px 25px !default; +$loadmask-msg-inner-icon: 'grid/loading.gif' !default; +$loadmask-msg-inner-border-color: adjust-color($base-color, $hue: 1.111deg, $saturation: -14.017%, $lightness: -9.608%) !default; +$loadmask-msg-inner-background-color: #eee !default; +$loadmask-msg-inner-color: #222 !default; +$loadmask-msg-inner-font-size: ceil($font-size * .9) !default; //11px +$loadmask-msg-inner-font-weight: normal !default; +$loadmask-msg-inner-font-family: $font-family !default; +$loadmask-msg-inner-font: $loadmask-msg-inner-font-weight $loadmask-msg-inner-font-size $loadmask-msg-inner-font-family !default;
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_menu.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_menu.scss new file mode 100644 index 000000000..161706510 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_menu.scss @@ -0,0 +1,22 @@ +//backgrounds +$menu-background-color: #F0F0F0 !default; +$menu-item-active-background-image: 'menu/menu-item-active-bg.gif'; +$menu-item-active-background-color: #D9E8FB !default; + +//border +$menu-item-active-border-color: #A9CBF5 !default; +$menu-separator-border-color: #E0E0E0 !default; +$menu-separator-background-color: #FFF !default; + +//sizes +$menu-item-indent: 27px !default; +$menu-padding: 2px !default; + +//text +$menu-text-color: #222 !default; + +//icons +$menu-icon-arrow: 'menu/menu-parent.gif'; +$menu-icon-checked: 'menu/checked.gif'; +$menu-icon-group-checked: 'menu/group-checked.gif'; +$menu-icon-unchecked: 'menu/unchecked.gif';
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_panel.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_panel.scss new file mode 100644 index 000000000..2c57796f3 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_panel.scss @@ -0,0 +1,65 @@ +// TODO: Change value to $include-default-uis !default; +$include-panel-uis: true; + +// =============================== +// ========= BASE PANEL ========== +// =============================== +$panel-border-radius: null !default; +$panel-border-width: 1px !default; +$panel-base-color: adjust-color($base-color, $hue: 0deg, $saturation: 0.542%, $lightness: 7.843%) !default; //#DFE8F6 +$panel-border-color: adjust-color($base-color, $hue: 0deg, $saturation: 7.644%, $lightness: -8.627%) !default; + +// =============================== +// ========= PANEL BODY ========== +// =============================== +$panel-body-border-style: solid !default; +$panel-body-background-color: #fff !default; +$panel-body-color: #000 !default; +$panel-body-border-color: $panel-border-color !default; +$panel-body-font-size: 12px !default; + +// =============================== +// ======== PANEL TOOLS ========== +// =============================== +$tool-size: 15px !default; + +// =============================== +// ======== PANEL HEADER ========= +// =============================== +$panel-header-border-width: 1px !default; +$panel-header-border-style: solid !default; +$panel-header-inner-border: true !default; +$panel-header-inner-border-width: 1px 0 0 !default; + +//padding +$panel-header-padding: 5px 4px 4px 5px !default; + +//fonts +$panel-header-font-size: ceil($font-size * .9) !default; //11px +$panel-header-line-height: $tool-size !default; +$panel-header-font-weight: bold !default; +$panel-header-font-family: $font-family !default; + +//background +$panel-header-background-gradient: 'panel-header' !default; + +// UI defaults +$panel-header-border-color: $panel-border-color !default; +$panel-header-inner-border-color: adjust-color($panel-base-color, $hue: 0deg, $saturation: -6.098%, $lightness: 4.902%) !default; +$panel-header-color: adjust-color($panel-base-color, $hue: 0deg, $saturation: 38.347%, $lightness: -63.725%) !default; +$panel-header-background-color: adjust-color($panel-base-color, $hue: 0deg, $saturation: 6.402%, $lightness: -4.51%) !default; + +// =============================== +// ======== FRAMED PANEL ========= +// =============================== +$frame-base-color: $panel-base-color !default; + +//border +$panel-frame-border-radius: 4px !default; +$panel-frame-border-width: 1px !default; +$panel-frame-border-style: solid !default; +$panel-frame-padding: 4px !default; + +// UI defaults +$panel-frame-background-color: $frame-base-color !default; +$panel-frame-border-color: $panel-border-color !default; diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_pickers.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_pickers.scss new file mode 100644 index 000000000..911c80b89 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_pickers.scss @@ -0,0 +1,66 @@ +// color picker +$colorpicker-item-border-color: #aca899 !default; +$colorpicker-over-border-color: #8bb8f3 !default; +$colorpicker-over-background-color: #deecfd !default; + +// date picker +$datepicker-base-color: $base-color !default; + +$datepicker-border-color: adjust-color($datepicker-base-color, $hue: 5.926deg, $saturation: 4.444%, $lightness: -57.647%) !default; //#1b376c +$datepicker-border-width: 1px !default; +$datepicker-border-style: solid !default; +$datepicker-border: $datepicker-border-width $datepicker-border-style $datepicker-border-color !default; +$datepicker-background-color: #ffffff !default; + +$datepicker-next-image: 'shared/right-btn.gif' !default; +$datepicker-prev-image: 'shared/left-btn.gif' !default; +$datepicker-month-arrow-image: 'button/s-arrow-light.gif' !default; +$datepicker-tool-sprite-image: 'tools/tool-sprites.gif' !default; + +$datepicker-header-background-color: adjust-color($datepicker-base-color, $hue: 5.768deg, $saturation: 0.419%, $lightness: -52.941%) !default; //#23427c +$datepicker-header-background-gradient: matte !default; + +$datepicker-monthpicker-color: #fff !default; + +$datepicker-th-color: adjust-color($datepicker-base-color, $hue: 5.586deg, $saturation: -4.167%, $lightness: -55.882%) !default; //#233d6d +$datepicker-th-font-family: $font-family !default; +$datepicker-th-font-size: 10px !default; +$datepicker-th-font-weight: normal !default; +$datepicker-th-font: $datepicker-th-font-weight $datepicker-th-font-size $font-family !default; +$datepicker-th-background-color: adjust-color($datepicker-base-color, $hue: -1.19deg, $saturation: 22.222%, $lightness: 8.824%) !default; //#dfecfb +$datepicker-th-background-gradient: matte !default; +$datepicker-th-border-bottom-color: darken($datepicker-th-background-color, 10) !default; +$datepicker-th-text-align: right !default; + +$datepicker-td-height: 17px !default; + +//item +$datepicker-item-color: #000 !default; +$datepicker-item-border-width: 1px !default; +$datepicker-item-border-style: solid !default; +$datepicker-item-border-color: #fff !default; +$datepicker-item-border: $datepicker-item-border-width $datepicker-item-border-style $datepicker-item-border-color !default; + +$datepicker-item-hover-background-color: adjust-color($datepicker-base-color, $hue: -0.606deg, $saturation: 38.73%, $lightness: 9.02%) !default; //#ddecfe + +$datepicker-today-item-border-color: darkred !default; + +$datepicker-selected-item-border-width: 1px !default; +$datepicker-selected-item-border-style: solid !default; +$datepicker-selected-item-border-color: adjust-color($datepicker-base-color, $hue: 0.853deg, $saturation: 5.008%, $lightness: -11.961%) !default; //#8db2e3 +$datepicker-selected-item-border: $datepicker-selected-item-border-width $datepicker-selected-item-border-style $datepicker-selected-item-border-color !default; +$datepicker-selected-item-background-color: adjust-color($datepicker-base-color, $hue: 0.267deg, $saturation: -4.535%, $lightness: 6.275%) !default; + +$datepicker-footer-background-color: $datepicker-th-background-color !default; +$datepicker-footer-background-gradient: color_stops(adjust-color($datepicker-base-color, $hue: 0.58deg, $saturation: -2.067%, $lightness: 7.451%), adjust-color($datepicker-base-color, $hue: -0.43deg, $saturation: -4.736%, $lightness: 3.922%) 49%, adjust-color($datepicker-base-color, $hue: -0.175deg, $saturation: -4.204%, $lightness: 1.373%) 51%, adjust-color($datepicker-base-color, $hue: 0.952deg, $saturation: -4.831%, $lightness: 2.353%)) !default; +$datepicker-footer-border-top-color: $datepicker-th-border-bottom-color !default; //a3bad9 + +$datepicker-monthpicker-height: 167px !default; + +$datepicker-monthpicker-item-color: adjust-color($datepicker-base-color, $hue: 3.785deg, $saturation: 18.194%, $lightness: -52.745%) !default; //#15428B +$datepicker-monthpicker-item-border: $datepicker-item-border !default; + +$datepicker-monthpicker-item-hover-background-color: $datepicker-item-hover-background-color !default; + +$datepicker-monthpicker-item-selected-background-color: $datepicker-footer-background-color !default; +$datepicker-monthpicker-item-selected-border: $datepicker-selected-item-border !default; diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_progress-bar.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_progress-bar.scss new file mode 100644 index 000000000..5f440b6bf --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_progress-bar.scss @@ -0,0 +1,21 @@ +$progress-bar-base-color: $base-color !default; + +$progress-height: 20px !default; + +//borders +$progress-border-color: adjust-color($progress-bar-base-color, $hue: 0deg, $saturation: -3.08%, $lightness: -23.725%) !default; +$progress-border-width: 1px !default; +$progress-border-radius: 0 !default; + +//backgrounds +$progress-background-color: adjust-color($progress-bar-base-color, $hue: 0deg, $saturation: -11.37%, $lightness: 7.451%) !default; + +//bar +$progress-bar-background-color: adjust-color($progress-bar-base-color, $hue: 0deg, $saturation: 8.187%, $lightness: -17.647%) !default; + +//text +$progress-text-color-front: #fff !default; +$progress-text-color-back: adjust-color($progress-bar-base-color, $hue: 0deg, $saturation: -10.895%, $lightness: -43.725%) !default; +$progress-text-text-align: center !default; +$progress-text-font-size: ceil($font-size * .9) !default; +$progress-text-font-weight: bold !default;
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_qtip.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_qtip.scss new file mode 100644 index 000000000..f830f513e --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_qtip.scss @@ -0,0 +1,29 @@ +$tip-base-color: adjust-color($base-color, $hue: 2.121deg, $saturation: 44.444%, $lightness: 11.569%) !default; + +//background +$tip-background-color: $tip-base-color !default; +$tip-background-gradient: null !default; + +//text +$tip-body-color : adjust-color($neutral-color, $hue: 0deg, $saturation: 0%, $lightness: -66.667%) !default; +$tip-body-font-size : ceil($font-size * .9) !default; +$tip-body-font-weight: normal !default; +$tip-body-padding: 3px !default; +$tip-body-link-color: darken($tip-body-color, 10%) !default; + +$tip-header-color : $tip-body-color !default; +$tip-header-font-size : $tip-body-font-size !default; +$tip-header-font-weight: bold !default; +$tip-header-padding : 3px 3px 0 !default; + +//borders +$tip-border-color: adjust-color($tip-base-color, $hue: -1.705deg, $saturation: -60.494%, $lightness: -27.451%) !default; +$tip-border-width: 1px !default; +$tip-border-radius: 3px !default; + +//error tips +$tip-error-inner-border-color: #d87166 !default; +$tip-error-border-color: #a1311f !default; +$tip-error-border-radius: 5px !default; +$tip-error-border-width: 1px !default; +$tip-error-background-color: #fff !default; diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_tabs.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_tabs.scss new file mode 100644 index 000000000..4174dfc1c --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_tabs.scss @@ -0,0 +1,87 @@ +//color +$tabbar-base-color: adjust-color($panel-base-color, $hue: 0deg, $saturation: -3.156%, $lightness: -5.294%) !default; +$tabbar-background-gradient: 'tabbar' !default; + +//background +$tab-base-color: adjust-color($base-color, $hue: 0deg, $saturation: 33.016%, $lightness: 9.02%) !default; //#deecfd +$tab-base-color-over: adjust-color($tab-base-color, $hue: 0deg, $saturation: 11.429%, $lightness: 2.353%) !default; +$tab-base-color-active: $tab-base-color !default; +$tab-base-color-disabled: adjust-color($base-color, $hue: 0deg, $saturation: 15.873%, $lightness: 9.02%) !default; //E1ECFA + +$tab-background: $tab-base-color !default; +$tab-background-over: $tab-base-color-over !default; +$tab-background-active: $tab-base-color-active !default; +$tab-background-disabled: $tab-base-color-disabled !default; + +$tab-color: adjust-color($tab-base-color, $hue: 0deg, $saturation: -45.589%, $lightness: -48.431%) !default; +$tab-color-over: $tab-color !default; +$tab-color-active: adjust-color($tab-color, $hue: 0deg, $saturation: 30.768%, $lightness: -13.333%) !default; +$tab-color-disabled: #c3b3b3 !default; + +$tab-font-size: ceil($font-size * .9) !default; //11px +$tab-font-size-over: $tab-font-size !default; +$tab-font-size-active: $tab-font-size !default; +$tab-font-size-disabled: $tab-font-size !default; + +$tab-font-family: $font-family; +$tab-font-family-over: $tab-font-family; +$tab-font-family-active: $tab-font-family; +$tab-font-family-disabled: $tab-font-family; + +$tab-font-weight: bold !default; +$tab-font-weight-over: $tab-font-weight !default; +$tab-font-weight-active: $tab-font-weight !default; +$tab-font-weight-disabled: $tab-font-weight !default; + +$tab-background-gradient: 'tab' !default; +$tab-background-gradient-over: 'tab-over' !default; +$tab-background-gradient-active: 'tab-active' !default; +$tab-background-gradient-disabled: 'tab-disabled' !default; + +//borders +$tab-inner-border: true !default; + +$tab-top-border-radius: 4px 4px 0 0 !default; +$tab-top-border-width: 1px 1px 0 1px !default; +$tab-top-inner-border-width: 1px 1px 0 !default; + +$tab-bottom-border-radius: 0 0 4px 4px !default; +$tab-bottom-border-width: 0 1px 1px 1px !default; +$tab-bottom-inner-border-width: 0 1px 1px 1px !default; + +$tab-border-color: adjust-color($tab-base-color, $hue:0deg, $saturation: -28.008%, $lightness: -20.98%) !default; +$tab-border-color-over: $tab-border-color !default; +$tab-border-color-active: $tab-border-color !default; +$tab-border-color-disabled: adjust-color($base-color, $hue:0deg, $saturation: 6.349%, $lightness: -0.588%) !default; + +$tab-inner-border-color: adjust-color($tab-base-color, $hue: 0deg, $saturation: -8.571%, $lightness: 8.941%) !default; + +$tabbar-border-color: $panel-header-border-color !default; + +//size +$tab-height: 20px !default; +$tab-spacing: 2px; + +//tab bar body border and padding +$tabbar-top-body-border-width: 1px 1px 0 !default; +$tabbar-top-body-padding: 1px 0 3px !default; +$tabbar-top-plain-body-border-width: 0 !default; +$tabbar-top-plain-body-padding: 0 0 3px !default; +$tabbar-bottom-body-border-width: 0 1px 1px !default; +$tabbar-bottom-body-padding: 3px 0 1px !default; +$tabbar-bottom-plain-body-border-width: 0 !default; +$tabbar-bottom-plain-body-padding: 3px 0 0 !default; + +//closable tab +$tab-closable-icon: 'tab/tab-default-close.gif' !default; +$tab-closable-icon-width: 11px !default; +$tab-closable-icon-height: 11px !default; +$tab-closable-icon-top: 3px !default; +$tab-closable-icon-right: 3px !default; + +//tab bar strip +$tabbar-strip-height: 3px !default; +$tabbar-strip-border-color: $panel-header-border-color !default; +$tabbar-strip-background-color: $tab-base-color !default; +$tabbar-top-strip-border-width: 1px 1px 0 !default; +$tabbar-bottom-strip-border-width: 0 1px 1px !default; diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_toolbar.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_toolbar.scss new file mode 100644 index 000000000..c1438e179 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_toolbar.scss @@ -0,0 +1,30 @@ +$toolbar-font-size: ceil($font-size * .9) !default; + +$toolbar-background-color: adjust-color($base-color, $hue: -1.333deg, $saturation: -3.831%, $lightness: 4.51%) !default; +$toolbar-background-gradient: color_stops(lighten($toolbar-background-color, 3), $toolbar-background-color) !default; +$toolbar-inner-border-width: 1px 0px 0px !default; +$toolbar-inner-border-color: lighten($toolbar-background-color, 5%) !default; + +//margins +$toolbar-horizontal-spacing: 2px; +$toolbar-vertical-spacing: 2px; +$toolbar-footer-horizontal-spacing: 6px; +$toolbar-footer-vertical-spacing: 2px; + +//border +$toolbar-border-color: $panel-body-border-color !default; + +//spacer +$toolbar-spacer-width: 2px !default; + +//separator +$toolbar-separator-color: #98c8ff !default; +$toolbar-separator-highlight-color: #fff !default; + +//text +$toolbar-text-font-family: $font-family; +$toolbar-text-font-size: ceil($font-size * .9) !default; //11px +$toolbar-text-font-weight: normal !default; +$toolbar-text-color: mix($mix-color, #000, 30) !default; +$toolbar-text-padding: 3px 4px 0 4px !default; +$toolbar-text-line-height: 16px !default;
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_tree.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_tree.scss new file mode 100644 index 000000000..c5d649c81 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_tree.scss @@ -0,0 +1,2 @@ +$tree-elbow-height: 18px !default; +$tree-elbow-width: 16px !default;
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_window.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_window.scss new file mode 100644 index 000000000..86b730321 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/variables/_window.scss @@ -0,0 +1,19 @@ +$window-base-color: $base-color !default; + +$window-border-radius: 5px 5px !default; +$window-border-width: 1px !default; +$window-border-color: adjust-color($window-base-color, $hue: 0.952deg, $saturation: -32.377%, $lightness: -13.725%) !default; +$window-inner-border-width: 1px !default; +$window-inner-border-color: adjust-color($window-base-color, $hue: 2.667deg, $saturation: 9.662%, $lightness: 11.373%) !default; +$window-background-color: adjust-color($window-base-color, $hue: 0.267deg, $saturation: -21.309%, $lightness: 1.569%) !default; + +$window-body-border-width: 1px !default; +$window-body-border-style: solid !default; +$window-body-border-color: adjust-color($window-base-color, $hue: 0.844deg, $saturation: 7.644%, $lightness: -8.627%) !default; +$window-body-background-color: adjust-color($window-base-color, $hue: 3.188deg, $saturation: 0.542%, $lightness: 7.843%) !default; +$window-body-color: #000 !default; + +$window-header-padding: 5px 5px 0 !default; +$window-header-font-size: ceil($font-size * .9) !default; //11px +$window-header-color: adjust-color($window-base-color, $hue: -2.451deg, $saturation: 38.889%, $lightness: -55.882%) !default; +$window-header-font-weight: bold !default;
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_boundlist.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_boundlist.scss new file mode 100644 index 000000000..5726408af --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_boundlist.scss @@ -0,0 +1,45 @@ +@mixin extjs-boundlist { + .#{$prefix}boundlist { + border-width: $boundlist-border-width; + border-style: $boundlist-border-style; + border-color: $boundlist-border-color; + background: $boundlist-background-color; + + .#{$prefix}toolbar { + border-width: 1px 0 0 0; + } + } + + .#{$prefix}boundlist-item { + padding: $boundlist-item-padding; + + @include no-select; + + cursor: pointer; + cursor: hand; + position: relative; /*allow hover in IE on empty items*/ + + border-width: $boundlist-item-border-width; + border-style: $boundlist-item-border-style; + border-color: $boundlist-item-border-color; + } + + .#{$prefix}boundlist-selected { + background: $boundlist-item-selected-background-color; + border-color: $boundlist-item-selected-border-color; + } + + .#{$prefix}boundlist-item-over { + background: $boundlist-item-over-background-color; + border-color: $boundlist-item-over-border-color; + } + + .#{$prefix}boundlist-floating { + border-top-width: 0; + } + + .#{$prefix}boundlist-above { + border-top-width: 1px; + border-bottom-width: 1px; + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_btn-group.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_btn-group.scss new file mode 100644 index 000000000..c11b60d19 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_btn-group.scss @@ -0,0 +1,80 @@ +@mixin extjs-btn-group { + .#{$prefix}btn-group { + position: relative; + overflow: hidden; + } + + .#{$prefix}btn-group-body { + position: relative; + zoom: 1; + padding: $btn-group-padding; + .#{$prefix}table-layout-cell { + vertical-align: top; + } + } + + .#{$prefix}btn-group-header-text { + white-space: nowrap; + } + + @include extjs-btn-group-ui('default'); +} + +/** + * @mixin extjs-btn-group-ui + * @class Ext.ButtonGroup + */ +@mixin extjs-btn-group-ui( + $ui-label, + $ui-base-color: null, + + // background + $ui-background-color: $btn-group-background-color, + + // borders + $ui-border-color: $btn-group-border-color, + $ui-border-width: $btn-group-border-width, + $ui-border-radius: $btn-group-border-radius, + $ui-inner-border-color: $btn-group-inner-border-color, + + //header + $ui-header-background-color: $btn-group-header-background-color, + $ui-header-font: $btn-group-header-font, + $ui-header-color: $btn-group-header-color +){ + @include x-frame( + 'btn-group', + $ui: '#{$ui-label}-framed', + + /* Radius, width, padding and background-color */ + $border-radius: $ui-border-radius, + $border-width: $ui-border-width, + $padding: $btn-group-padding, + $background-color: $ui-background-color + ); + + .#{$prefix}btn-group-#{$ui-label}-framed { + border-color: $ui-border-color; + @include inner-border( + $width: $btn-group-inner-border-width, + $color: $ui-inner-border-color + ); + } + + .#{$prefix}btn-group-header-#{$ui-label}-framed { + margin: $btn-group-header-margin; + } + + .#{$prefix}btn-group-header-body-#{$ui-label}-framed { + padding: $btn-group-header-padding; + + background: $ui-header-background-color; + + @include border-top-radius($ui-border-radius); + } + + .#{$prefix}btn-group-header-text-#{$ui-label}-framed { + font: $ui-header-font; + color: $ui-header-color; + } +} diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_button.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_button.scss new file mode 100644 index 000000000..7d14febed --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_button.scss @@ -0,0 +1,985 @@ +/** + * @class Ext.Button + * Used to create the base structure of an Ext.Button + */ +@mixin extjs-button { + .#{$prefix}btn { + display: inline-block; + zoom: 1; + *display: inline; + position: relative; + + cursor: pointer; + cursor: hand; + + white-space: nowrap; + + vertical-align: middle; + + * { + cursor: pointer; + cursor: hand; + } + + background-repeat: no-repeat; + + em { + background-repeat: no-repeat; + + // Styles for an anchor button. + a { + text-decoration: none; + display: inline-block; + color: inherit; + } + } + + button { + margin: 0; + padding: 0; + border: 0; + width: auto; + background: none; + outline: 0 none; + overflow: hidden; + vertical-align: bottom; + -webkit-appearance: none; + + &::-moz-focus-inner { + border: 0; + padding: 0; + } + } + + .#{$prefix}btn-inner { + display: block; + white-space: nowrap; + text-align: center; + background-color: transparent; + background-repeat: no-repeat; + background-position: left center; + } + } + + .#{$prefix}btn-disabled { + @include opacity(1); + } + + .#{$prefix}btn-disabled span { + @include opacity(.5); + + .#{$prefix}ie6 &, + .#{$prefix}ie7 & { + filter:none; + } + } + + //remove the opacity rule of IE8 + .#{$prefix}ie7 .#{$prefix}btn-disabled, + .#{$prefix}ie8 .#{$prefix}btn-disabled { + filter:none; + } + + .#{$prefix}ie6 .#{$prefix}btn-disabled, + .#{$prefix}ie7 .#{$prefix}btn-disabled, + .#{$prefix}ie8 .#{$prefix}btn-disabled { + .#{$prefix}btn-icon { + @include opacity(.6); + } + } + + @if $include-ie { + * html .#{$prefix}ie { + .#{$prefix}btn button { + width: 1px; + } + } + + .#{$prefix}ie .#{$prefix}btn button { + overflow-x: visible; /*prevents extra horiz space in IE*/ + vertical-align: baseline; /*IE doesn't like bottom*/ + } + + .#{$prefix}strict .#{$prefix}ie6, + .#{$prefix}strict .#{$prefix}ie7 { + .#{$prefix}btn .#{$prefix}frame-mc { + height: 100%; + } + } + } + + @if not $supports-border-radius or $compile-all { + .#{$prefix}nbr { + .#{$prefix}btn { + .#{$prefix}frame-mc { + vertical-align: middle; + white-space: nowrap; + text-align: center; + cursor: pointer; + } + } + } + } + + .#{$prefix}btn-icon-text-left .#{$prefix}btn-icon { + background-position: left center; + } + + .#{$prefix}btn-icon-text-right .#{$prefix}btn-icon { + background-position: right center; + } + + .#{$prefix}btn-icon-text-top .#{$prefix}btn-icon { + background-position: center top; + } + + .#{$prefix}btn-icon-text-bottom .#{$prefix}btn-icon { + background-position: center bottom; + } + + .#{$prefix}btn { + button, a { + position: relative; + + .#{$prefix}btn-icon { + position: absolute; + background-repeat: no-repeat; + } + } + } + + .#{$prefix}btn-arrow-right { + background: transparent no-repeat right center; + padding-right: $button-arrow-size; + + .#{$prefix}btn-inner { + padding-right: 0 !important; + } + } + + .#{$prefix}toolbar .#{$prefix}btn-arrow-right { + padding-right: $button-toolbar-arrow-size; + } + + .#{$prefix}btn-arrow-bottom { + background: transparent no-repeat center bottom; + padding-bottom: $button-arrow-size; + } + + .#{$prefix}btn-arrow { + @include theme-background-image($theme-name, 'button/arrow.gif'); + display: block; + } + + + //split buttons + .#{$prefix}btn-split-right, + .#{$prefix}btn-over .#{$prefix}btn-split-right { + background: transparent no-repeat right center; + @include theme-background-image($theme-name, 'button/s-arrow.gif'); + padding-right: $button-split-size !important; + } + + .#{$prefix}btn-split-bottom, + .#{$prefix}btn-over .#{$prefix}btn-split-bottom { + background: transparent no-repeat center bottom; + @include theme-background-image($theme-name, 'button/s-arrow-b.gif'); + padding-bottom: $button-split-size; + } + + .#{$prefix}toolbar .#{$prefix}btn-split-right { + @include theme-background-image($theme-name, 'button/s-arrow-noline.gif'); + padding-right: $button-toolbar-split-size !important; + } + + .#{$prefix}toolbar .#{$prefix}btn-split-bottom { + @include theme-background-image($theme-name, 'button/s-arrow-b-noline.gif'); + } + + .#{$prefix}btn-split { + display: block; + } + + .#{$prefix}item-disabled, + .#{$prefix}item-disabled * { + cursor: default; + } + + .#{$prefix}cycle-fixed-width .#{$prefix}btn-inner { + text-align: inherit; + } + + .#{$prefix}btn-over .#{$prefix}btn-split-right { @include theme-background-image($theme-name, 'button/s-arrow-o.gif'); } + .#{$prefix}btn-over .#{$prefix}btn-split-bottom { @include theme-background-image($theme-name, 'button/s-arrow-bo.gif'); } + + @include extjs-button-ui( + /* UI + Scale */ + 'default-small', + + $button-small-border-radius, + $button-small-border-width, + + $button-default-border-color, + $button-default-border-color-over, + $button-default-border-color-focus, + $button-default-border-color-pressed, + $button-default-border-color-disabled, + + $button-small-padding, + $button-small-text-padding, + + $button-default-background-color, + $button-default-background-color-over, + $button-default-background-color-focus, + $button-default-background-color-pressed, + $button-default-background-color-disabled, + + $button-default-background-gradient, + $button-default-background-gradient-over, + $button-default-background-gradient-focus, + $button-default-background-gradient-pressed, + $button-default-background-gradient-disabled, + + $button-default-color, + $button-default-color-over, + $button-default-color-focus, + $button-default-color-pressed, + $button-default-color-disabled, + + $button-small-font-size, + $button-small-font-size-over, + $button-small-font-size-focus, + $button-small-font-size-pressed, + $button-small-font-size-disabled, + + $button-small-font-weight, + $button-small-font-weight-over, + $button-small-font-weight-focus, + $button-small-font-weight-pressed, + $button-small-font-weight-disabled, + + $button-small-font-family, + $button-small-font-family-over, + $button-small-font-family-focus, + $button-small-font-family-pressed, + $button-small-font-family-disabled, + + $button-small-icon-size + ); + + @include extjs-button-ui( + 'default-medium', + + $button-medium-border-radius, + $button-medium-border-width, + + $button-default-border-color, + $button-default-border-color-over, + $button-default-border-color-focus, + $button-default-border-color-pressed, + $button-default-border-color-disabled, + + $button-medium-padding, + $button-medium-text-padding, + + $button-default-background-color, + $button-default-background-color-over, + $button-default-background-color-focus, + $button-default-background-color-pressed, + $button-default-background-color-disabled, + + $button-default-background-gradient, + $button-default-background-gradient-over, + $button-default-background-gradient-focus, + $button-default-background-gradient-pressed, + $button-default-background-gradient-disabled, + + $button-default-color, + $button-default-color-over, + $button-default-color-focus, + $button-default-color-pressed, + $button-default-color-disabled, + + $button-medium-font-size, + $button-medium-font-size-over, + $button-medium-font-size-focus, + $button-medium-font-size-pressed, + $button-medium-font-size-disabled, + + $button-medium-font-weight, + $button-medium-font-weight-over, + $button-medium-font-weight-focus, + $button-medium-font-weight-pressed, + $button-medium-font-weight-disabled, + + $button-medium-font-family, + $button-medium-font-family-over, + $button-medium-font-family-focus, + $button-medium-font-family-pressed, + $button-medium-font-family-disabled, + + $button-medium-icon-size + ); + + @include extjs-button-ui( + 'default-large', + + $button-large-border-radius, + $button-large-border-width, + + $button-default-border-color, + $button-default-border-color-over, + $button-default-border-color-focus, + $button-default-border-color-pressed, + $button-default-border-color-disabled, + + $button-large-padding, + $button-large-text-padding, + + $button-default-background-color, + $button-default-background-color-over, + $button-default-background-color-focus, + $button-default-background-color-pressed, + $button-default-background-color-disabled, + + $button-default-background-gradient, + $button-default-background-gradient-over, + $button-default-background-gradient-focus, + $button-default-background-gradient-pressed, + $button-default-background-gradient-disabled, + + $button-default-color, + $button-default-color-over, + $button-default-color-focus, + $button-default-color-pressed, + $button-default-color-disabled, + + $button-large-font-size, + $button-large-font-size-over, + $button-large-font-size-focus, + $button-large-font-size-pressed, + $button-large-font-size-disabled, + + $button-large-font-weight, + $button-large-font-weight-over, + $button-large-font-weight-focus, + $button-large-font-weight-pressed, + $button-large-font-weight-disabled, + + $button-large-font-family, + $button-large-font-family-over, + $button-large-font-family-focus, + $button-large-font-family-pressed, + $button-large-font-family-disabled, + + $button-large-icon-size + ); + + @include extjs-button-ui( + 'default-toolbar-small', + + $button-small-border-radius, + $button-small-border-width, + + $button-toolbar-border-color, + $button-toolbar-border-color-over, + $button-toolbar-border-color-focus, + $button-toolbar-border-color-pressed, + $button-toolbar-border-color-disabled, + + $button-small-padding, + $button-small-text-padding, + + $button-toolbar-background-color, + $button-toolbar-background-color-over, + $button-toolbar-background-color-focus, + $button-toolbar-background-color-pressed, + $button-toolbar-background-color-disabled, + + $button-toolbar-background-gradient, + $button-toolbar-background-gradient-over, + $button-toolbar-background-gradient-focus, + $button-toolbar-background-gradient-pressed, + $button-toolbar-background-gradient-disabled, + + $button-toolbar-color, + $button-toolbar-color-over, + $button-toolbar-color-focus, + $button-toolbar-color-pressed, + $button-toolbar-color-disabled, + + $button-small-font-size, + $button-small-font-size-over, + $button-small-font-size-focus, + $button-small-font-size-pressed, + $button-small-font-size-disabled, + + $button-small-font-weight, + $button-small-font-weight-over, + $button-small-font-weight-focus, + $button-small-font-weight-pressed, + $button-small-font-weight-disabled, + + $button-small-font-family, + $button-small-font-family-over, + $button-small-font-family-focus, + $button-small-font-family-pressed, + $button-small-font-family-disabled, + + $button-small-icon-size + ); + + @include extjs-button-ui( + 'default-toolbar-medium', + + $button-medium-border-radius, + $button-medium-border-width, + + $button-toolbar-border-color, + $button-toolbar-border-color-over, + $button-toolbar-border-color-focus, + $button-toolbar-border-color-pressed, + $button-toolbar-border-color-disabled, + + $button-medium-padding, + $button-medium-text-padding, + + $button-toolbar-background-color, + $button-toolbar-background-color-over, + $button-toolbar-background-color-focus, + $button-toolbar-background-color-pressed, + $button-toolbar-background-color-disabled, + + $button-toolbar-background-gradient, + $button-toolbar-background-gradient-over, + $button-toolbar-background-gradient-focus, + $button-toolbar-background-gradient-pressed, + $button-toolbar-background-gradient-disabled, + + $button-toolbar-color, + $button-toolbar-color-over, + $button-toolbar-color-focus, + $button-toolbar-color-pressed, + $button-toolbar-color-disabled, + + $button-medium-font-size, + $button-medium-font-size-over, + $button-medium-font-size-focus, + $button-medium-font-size-pressed, + $button-medium-font-size-disabled, + + $button-medium-font-weight, + $button-medium-font-weight-over, + $button-medium-font-weight-focus, + $button-medium-font-weight-pressed, + $button-medium-font-weight-disabled, + + $button-medium-font-family, + $button-medium-font-family-over, + $button-medium-font-family-focus, + $button-medium-font-family-pressed, + $button-medium-font-family-disabled, + + $button-medium-icon-size + ); + + @include extjs-button-ui( + 'default-toolbar-large', + + $button-large-border-radius, + $button-large-border-width, + + $button-toolbar-border-color, + $button-toolbar-border-color-over, + $button-toolbar-border-color-focus, + $button-toolbar-border-color-pressed, + $button-toolbar-border-color-disabled, + + $button-large-padding, + $button-large-text-padding, + + $button-toolbar-background-color, + $button-toolbar-background-color-over, + $button-toolbar-background-color-focus, + $button-toolbar-background-color-pressed, + $button-toolbar-background-color-disabled, + + $button-toolbar-background-gradient, + $button-toolbar-background-gradient-over, + $button-toolbar-background-gradient-focus, + $button-toolbar-background-gradient-pressed, + $button-toolbar-background-gradient-disabled, + + $button-toolbar-color, + $button-toolbar-color-over, + $button-toolbar-color-focus, + $button-toolbar-color-pressed, + $button-toolbar-color-disabled, + + $button-large-font-size, + $button-large-font-size-over, + $button-large-font-size-focus, + $button-large-font-size-pressed, + $button-large-font-size-disabled, + + $button-large-font-weight, + $button-large-font-weight-over, + $button-large-font-weight-focus, + $button-large-font-weight-pressed, + $button-large-font-weight-disabled, + + $button-large-font-family, + $button-large-font-family-over, + $button-large-font-family-focus, + $button-large-font-family-pressed, + $button-large-font-family-disabled, + + $button-large-icon-size + ); + + .#{$prefix}btn-default-toolbar-small-disabled, + .#{$prefix}btn-default-toolbar-medium-disabled, + .#{$prefix}btn-default-toolbar-large-disabled { + border-color: transparent; + + background-image: none; + background: transparent; + } +} + +@mixin extjs-button-ui( + $ui, + + $border-radius: 0px, + + $border-width: 0px, + + $border-color: null, + $border-color-over: null, + $border-color-focus: null, + $border-color-pressed: null, + $border-color-disabled: null, + + $padding: null, + $text-padding: null, + + $background-color: null, + $background-color-over: null, + $background-color-focus: null, + $background-color-pressed: null, + $background-color-disabled: null, + + $background-gradient: null, + $background-gradient-over: null, + $background-gradient-focus: null, + $background-gradient-pressed: null, + $background-gradient-disabled: null, + + $color: null, + $color-over: null, + $color-focus: null, + $color-pressed: null, + $color-disabled: null, + + $font-size: null, + $font-size-over: null, + $font-size-focus: null, + $font-size-pressed: null, + $font-size-disabled: null, + + $font-weight: null, + $font-weight-over: null, + $font-weight-focus: null, + $font-weight-pressed: null, + $font-weight-disabled: null, + + $font-family: null, + $font-family-over: null, + $font-family-focus: null, + $font-family-pressed: null, + $font-family-disabled: null, + + $icon-size: null +) { + .#{$prefix}btn-#{$ui} { + border-color: $border-color; + } + + @include x-frame('btn', $ui, $border-radius, $border-width, $padding, $background-color, $background-gradient, true); + + .#{$prefix}btn-#{$ui} .#{$prefix}btn-inner { + font-size: $font-size; + font-weight: $font-weight; + font-family: $font-family; + color: $color; + background-repeat: no-repeat; + padding: 0 $text-padding; + } + + .#{$prefix}btn-#{$ui}-icon, + .#{$prefix}btn-#{$ui}-noicon { + button, + .#{$prefix}btn-inner { + height: $icon-size; + line-height: $icon-size; + } + } + + //icons + .#{$prefix}btn-#{$ui}-icon { + button { + padding: 0; + width: $icon-size !important; + height: $icon-size; + } + + .#{$prefix}btn-icon { + width: $icon-size; + height: $icon-size; + top: 0; + left: 0; + bottom: 0; + right: 0; + } + } + + .#{$prefix}btn-#{$ui}-icon-text-left { + button { + height: $icon-size; + } + .#{$prefix}btn-inner { + height: $icon-size; + line-height: $icon-size; + padding-left: $icon-size + 4px; + } + + .#{$prefix}btn-icon { + width: $icon-size; + height: auto; + top: 0; + left: 0; + bottom: 0; + right: auto; + + .#{$prefix}ie6 &, + .#{$prefix}quirks & { + height: $icon-size; + } + } + } + + .#{$prefix}btn-#{$ui}-icon-text-right { + button { + height: $icon-size; + } + .#{$prefix}btn-inner { + height: $icon-size; + line-height: $icon-size; + padding-right: $icon-size + 4px !important; + } + + .#{$prefix}btn-icon { + width: $icon-size; + height: auto; + top: 0; + left: auto; + bottom: 0; + right: 0; + + .#{$prefix}ie6 &, + .#{$prefix}quirks & { + height: $icon-size; + } + } + } + + .#{$prefix}btn-#{$ui}-icon-text-top { + .#{$prefix}btn-inner { + padding-top: $icon-size + 4px; + } + + .#{$prefix}btn-icon { + width: auto; + height: $icon-size; + top: 0; + left: 0; + bottom: auto; + right: 0; + + .#{$prefix}ie6 &, + .#{$prefix}quirks & { + width: $icon-size; + } + } + } + + .#{$prefix}btn-#{$ui}-icon-text-bottom { + .#{$prefix}btn-inner { + padding-bottom: $icon-size + 4px; + } + + .#{$prefix}btn-icon { + width: auto; + height: $icon-size; + top: auto; + left: 0; + bottom: 0; + right: 0; + + .#{$prefix}ie6 &, + .#{$prefix}quirks & { + width: $icon-size; + } + } + } + + .#{$prefix}btn-#{$ui}-over { + @if $border-color-over != $border-color { + border-color: $border-color-over; + } + @if $background-color-over != null { + @include background-gradient($background-color-over, $background-gradient-over); + } + + .#{$prefix}btn-inner { + @if $color-over != $color { + color: $color-over; + } + @if $font-weight-over != $font-weight { + font-weight: $font-weight-over; + } + @if $font-size-over != $font-size { + font-size: $font-size-over; + } + @if $font-family-over != $font-family { + font-family: $font-family-over; + } + } + } + + .#{$prefix}btn-#{$ui}-focus { + @if $border-color-focus != $border-color { + border-color: $border-color-focus; + } + @if $background-color-focus != null { + @include background-gradient($background-color-focus, $background-gradient-focus); + } + + .#{$prefix}btn-inner { + @if $color-focus != $color { + color: $color-focus; + } + @if $font-weight-focus != $font-weight { + font-weight: $font-weight-focus; + } + @if $font-size-focus != $font-size { + font-size: $font-size-focus; + } + @if $font-family-focus != $font-family { + font-family: $font-family-focus; + } + } + } + + .#{$prefix}btn-#{$ui}-menu-active, + .#{$prefix}btn-#{$ui}-pressed { + @if $border-color-pressed != $border-color { + border-color: $border-color-pressed; + } + @if $background-color-pressed != null { + @include background-gradient($background-color-pressed, $background-gradient-pressed); + } + + .#{$prefix}btn-inner { + @if $color-pressed != $color { + color: $color-pressed; + } + @if $font-weight-pressed != $font-weight { + font-weight: $font-weight-pressed; + } + @if $font-size-pressed != $font-size { + font-size: $font-size-pressed; + } + @if $font-family-pressed != $font-family { + font-family: $font-family-pressed; + } + } + } + + .#{$prefix}btn-#{$ui}-disabled { + @if $border-color-disabled != $border-color { + border-color: $border-color-disabled; + } + @if $background-color-disabled != null { + @include background-gradient($background-color-disabled, $background-gradient-disabled); + } + + .#{$prefix}btn-inner { + @if $color-disabled != $color { + color: $color !important; + } + @if $font-weight-disabled != $font-weight { + font-weight: $font-weight-disabled; + } + @if $font-size-disabled != $font-size { + font-size: $font-size-disabled; + } + @if $font-family-disabled != $font-family { + font-family: $font-family-disabled; + } + } + } + + .#{$prefix}ie .#{$prefix}btn-#{$ui}-disabled { + .#{$prefix}btn-inner { + @if $color-disabled != $color { + color: darken($color-disabled, 20) !important; + } + } + } + + .#{$prefix}ie6 .#{$prefix}btn-#{$ui}-disabled { + .#{$prefix}btn-inner { + @if $color-disabled != $color { + color: $color-disabled !important; + } + } + } + + @if not $supports-border-radius or $compile-all { + .#{$prefix}nbr { + .#{$prefix}btn-#{$ui}-over { + .#{$prefix}frame-tl, + .#{$prefix}frame-bl, + .#{$prefix}frame-tr, + .#{$prefix}frame-br, + .#{$prefix}frame-tc, + .#{$prefix}frame-bc { + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-over-corners.gif'); + } + .#{$prefix}frame-ml, + .#{$prefix}frame-mr { + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-over-sides.gif'); + } + .#{$prefix}frame-mc { + background-color: $background-color-over; + @if $background-gradient-over != null { + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-over-bg.gif'); + } + } + } + + .#{$prefix}btn-#{$ui}-focus { + .#{$prefix}frame-tl, + .#{$prefix}frame-bl, + .#{$prefix}frame-tr, + .#{$prefix}frame-br, + .#{$prefix}frame-tc, + .#{$prefix}frame-bc { + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-focus-corners.gif'); + } + .#{$prefix}frame-ml, + .#{$prefix}frame-mr { + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-focus-sides.gif'); + } + .#{$prefix}frame-mc { + background-color: $background-color-focus; + @if $background-gradient-focus != null { + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-focus-bg.gif'); + } + } + } + + .#{$prefix}btn-#{$ui}-menu-active, + .#{$prefix}btn-#{$ui}-pressed { + .#{$prefix}frame-tl, + .#{$prefix}frame-bl, + .#{$prefix}frame-tr, + .#{$prefix}frame-br, + .#{$prefix}frame-tc, + .#{$prefix}frame-bc { + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-pressed-corners.gif'); + } + .#{$prefix}frame-ml, + .#{$prefix}frame-mr { + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-pressed-sides.gif'); + } + .#{$prefix}frame-mc { + background-color: $background-color-pressed; + @if $background-gradient-pressed != null { + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-pressed-bg.gif'); + } + } + } + + .#{$prefix}btn-#{$ui}-disabled { + .#{$prefix}frame-tl, + .#{$prefix}frame-bl, + .#{$prefix}frame-tr, + .#{$prefix}frame-br, + .#{$prefix}frame-tc, + .#{$prefix}frame-bc { + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-disabled-corners.gif'); + } + .#{$prefix}frame-ml, + .#{$prefix}frame-mr { + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-disabled-sides.gif'); + } + .#{$prefix}frame-mc { + background-color: $background-color-disabled; + @if $background-gradient-disabled != null { + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-disabled-bg.gif'); + } + } + } + } + } + + @if not $supports-gradients or $compile-all { + @if $background-gradient != null { + .#{$prefix}nlg { + .#{$prefix}btn-#{$ui} { + background-repeat: repeat-x; + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-bg.gif'); + } + } + } + + @if $background-gradient-over != null { + .#{$prefix}nlg { + .#{$prefix}btn-#{$ui}-over { + background-repeat: repeat-x; + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-over-bg.gif'); + } + } + } + + @if $background-gradient-focus != null { + .#{$prefix}nlg { + .#{$prefix}btn-#{$ui}-focus { + background-repeat: repeat-x; + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-focus-bg.gif'); + } + } + } + + @if $background-gradient-pressed != null { + .#{$prefix}nlg { + .#{$prefix}btn-#{$ui}-menu-active, + .#{$prefix}btn-#{$ui}-pressed { + background-repeat: repeat-x; + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-pressed-bg.gif'); + } + } + } + + @if $background-gradient-disabled != null { + .#{$prefix}nlg { + .#{$prefix}btn-#{$ui}-disabled { + background-repeat: repeat-x; + @include theme-background-image($theme-name, 'btn/btn-#{$ui}-disabled-bg.gif'); + } + } + } + } +};
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_colorpicker.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_colorpicker.scss new file mode 100644 index 000000000..c35c6c060 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_colorpicker.scss @@ -0,0 +1,45 @@ +@mixin extjs-colorpicker { + .#{$prefix}color-picker { + width: 144px; + height: 90px; + cursor: pointer; + } + + .#{$prefix}color-picker a { + border: 1px solid #fff; + + float: left; + + padding: 2px; + + text-decoration: none; + + -moz-outline: 0 none; + outline: 0 none; + + cursor: pointer; + } + + .#{$prefix}color-picker a:hover, + .#{$prefix}color-picker a.#{$prefix}color-picker-selected { + border-color: $colorpicker-over-border-color; + background-color: $colorpicker-over-background-color; + } + + .#{$prefix}color-picker em { + display: block; + + border: 1px solid $colorpicker-item-border-color; + } + + .#{$prefix}color-picker em span { + cursor: pointer; + + display: block; + + height: 10px; + width: 10px; + + line-height: 10px; + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_datepicker.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_datepicker.scss new file mode 100644 index 000000000..459409c93 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_datepicker.scss @@ -0,0 +1,422 @@ +@mixin extjs-datepicker { + .#{$prefix}datepicker { + border: $datepicker-border; + + background-color: $datepicker-background-color; + position: relative; + + a { + -moz-outline: 0 none; + outline: 0 none; + + color: $datepicker-monthpicker-item-color; + text-decoration: none; + + border-width: 0; + } + } + + .#{$prefix}datepicker-inner, + .#{$prefix}datepicker-inner td, + .#{$prefix}datepicker-inner th { + border-collapse: separate; + } + + .#{$prefix}datepicker-header { + position: relative; + + height: 26px; + + @if $datepicker-header-background-gradient { + @include background-gradient($datepicker-header-background-color, $datepicker-header-background-gradient); + } @else { + background-color: $datepicker-header-background-color; + } + } + + .#{$prefix}datepicker-prev, + .#{$prefix}datepicker-next { + position: absolute; + top: 5px; + + width: 18px; + + a { + display: block; + + width: 16px; + height: 16px; + + background-position: top; + background-repeat: no-repeat; + + cursor: pointer; + + text-decoration: none !important; + + @include opacity(.7); + + &:hover { + @include opacity(1); + } + } + } + + .#{$prefix}datepicker-next { + right: 5px; + + a { + @include theme-background-image($theme-name, $datepicker-next-image); + } + } + + .#{$prefix}datepicker-prev { + left: 5px; + + a { + @include theme-background-image($theme-name, $datepicker-prev-image); + } + } + + .#{$prefix}item-disabled .#{$prefix}datepicker-prev a:hover, + .#{$prefix}item-disabled .#{$prefix}datepicker-next a:hover { + @include opacity(.6); + } + + .#{$prefix}datepicker-month { + padding-top: 3px; + + .#{$prefix}btn, + button, + .#{$prefix}btn-tc, + .#{$prefix}btn-tl, + .#{$prefix}btn-tr, + .#{$prefix}btn-mc, + .#{$prefix}btn-ml, + .#{$prefix}btn-mr, + .#{$prefix}btn-bc, + .#{$prefix}btn-bl, + .#{$prefix}btn-br { + background: transparent !important; + border-width: 0 !important; + } + + span { + color: #fff !important; + } + + .#{$prefix}btn-split-right { + background: no-repeat right center !important; + @include theme-background-image($theme-name, $datepicker-month-arrow-image); + + padding-right: 12px; + } + } + + .#{$prefix}datepicker-next { + text-align: right; + } + + .#{$prefix}datepicker-month { + //width: 120px; + text-align: center; + + button { + color: $datepicker-monthpicker-color !important; + } + } + + + table.#{$prefix}datepicker-inner { + width: 100%; + table-layout: fixed; + + th { + width: 25px; + height: 19px; + + padding: 0; + + color: $datepicker-th-color; + font: $datepicker-th-font; + text-align: $datepicker-th-text-align; + + border-bottom: 1px solid $datepicker-th-border-bottom-color; + border-collapse: separate; + + @if $datepicker-th-background-gradient { + @include background-gradient($datepicker-th-background-color, $datepicker-th-background-gradient); + } @else { + background-color: $datepicker-th-background-color; + } + + cursor: default; + + span { + display: block; + padding-right: 7px; + } + } + + tr { + height: 20px; + } + + td { + border: $datepicker-border-width $datepicker-border-style; + height: $datepicker-td-height; + border-color: $datepicker-background-color; + text-align: right; + padding: 0; + } + + a { + padding-right: 4px; + + display: block; + + zoom: 1; + + font: normal ceil($font-size * .9) $font-family; + color: $datepicker-item-color; + text-decoration: none; + text-align: right; + } + + .#{$prefix}datepicker-active { + cursor: pointer; + color: black; + } + + .#{$prefix}datepicker-selected { + a { + background: repeat-x left top; + background-color: $datepicker-selected-item-background-color; + border: 1px solid $datepicker-selected-item-border-color; + } + + span { + font-weight: bold; + } + } + + .#{$prefix}datepicker-today { + a { + border: $datepicker-border-width $datepicker-border-style; + border-color: $datepicker-today-item-border-color; + } + } + + .#{$prefix}datepicker-prevday, + .#{$prefix}datepicker-nextday { + a { + text-decoration: none !important; + color: #aaa; + } + } + + a:hover, + .#{$prefix}datepicker-disabled a:hover { + text-decoration: none !important; + + color: #000; + + background-color: $datepicker-item-hover-background-color; + } + + .#{$prefix}datepicker-disabled a { + cursor: default; + background-color: #eee; + color: #bbb; + } + } + + .#{$prefix}datepicker-footer, + .#{$prefix}monthpicker-buttons { + position: relative; + + border-top: $datepicker-border-width $datepicker-border-style $datepicker-footer-border-top-color; + + @if $datepicker-footer-background-gradient { + @include background-gradient($datepicker-footer-background-color, $datepicker-footer-background-gradient); + } @else { + background-color: $datepicker-footer-background-color; + } + + text-align: center; + + .#{$prefix}btn { + position: relative; + margin: 4px; + } + } + + .#{$prefix}item-disabled .#{$prefix}datepicker-inner a:hover { + background: none; + } + + // month picker + .#{$prefix}datepicker .#{$prefix}monthpicker { + position: absolute; + left: 0; + top: 0; + } + + + .#{$prefix}monthpicker { + border: $datepicker-border; + background-color: $datepicker-background-color; + } + + .#{$prefix}monthpicker-months, + .#{$prefix}monthpicker-years { + float: left; + + height: $datepicker-monthpicker-height; + width: 88px; + } + + .#{$prefix}monthpicker-item { + float: left; + + margin: 4px 0 5px 0; + + font: normal ceil($font-size * .9) $font-family; + text-align: center; + vertical-align: middle; + + height: 18px; + width: 43px; + + border: 0 none; + + a { + display: block; + + margin: 0 5px 0 5px; + + text-decoration: none; + + color: $datepicker-monthpicker-item-color; + + border: $datepicker-monthpicker-item-border; + + line-height: 17px; + + &:hover { + background-color: $datepicker-monthpicker-item-hover-background-color; + } + + &.#{$prefix}monthpicker-selected { + background-color: $datepicker-monthpicker-item-selected-background-color; + border: $datepicker-monthpicker-item-selected-border; + } + } + } + + .#{$prefix}monthpicker-months { + border-right: $datepicker-border; + width: 87px; + } + + .#{$prefix}monthpicker-years .#{$prefix}monthpicker-item { + width: 44px; + } + + .#{$prefix}monthpicker-yearnav { + height: 28px; + + button { + @include theme-background-image($theme-name, $datepicker-tool-sprite-image); + height: 15px; + width: 15px; + padding: 0; + margin: 6px 12px 5px 15px; + border: none; + outline: 0 none; + &::-moz-focus-inner { + border: 0; + padding: 0; + } + } + } + + .#{$prefix}monthpicker-yearnav-next { + background-position: 0 -120px; + } + + .#{$prefix}monthpicker-yearnav-next-over { + cursor: pointer; + cursor: hand; + background-position: -15px -120px; + } + + .#{$prefix}monthpicker-yearnav-prev { + background-position: 0 -105px; + } + + .#{$prefix}monthpicker-yearnav-prev-over { + cursor: pointer; + cursor: hand; + background-position: -15px -105px; + } + + .#{$prefix}monthpicker-small { + .#{$prefix}monthpicker-item { + margin: 2px 0 2px 0; + } + + .#{$prefix}monthpicker-yearnav { + height: 23px; + } + + .#{$prefix}monthpicker-months, .#{$prefix}monthpicker-years { + height: 136px; + } + } + + @if $include-ie { + .#{$prefix}quirks { + .#{$prefix}ie7, + .#{$prefix}ie8 { + .#{$prefix}monthpicker-buttons { + .#{$prefix}btn { + margin-top: 2px; + } + } + } + + .#{$prefix}monthpicker-small .#{$prefix}monthpicker-yearnav button { + margin-top: 3px; + margin-bottom: 3px; + } + } + + .#{$prefix}ie6 .#{$prefix}monthpicker-small .#{$prefix}monthpicker-yearnav button { + margin-top: 3px; + margin-bottom: 3px; + } + } + + //nlg support + @if not $supports-gradients or $compile-all { + .#{$prefix}nlg { + @if $datepicker-header-background-gradient != null { + .#{$prefix}datepicker-header { + @include theme-background-image($theme-name, 'datepicker/datepicker-header-bg.gif'); + background-repeat: repeat-x; + background-position: top left; + } + } + + @if $datepicker-footer-background-gradient != null { + .#{$prefix}datepicker-footer, + .#{$prefix}monthpicker-buttons { + @include theme-background-image($theme-name, 'datepicker/datepicker-footer-bg.gif'); + background-repeat: repeat-x; + background-position: top left; + } + } + } + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_drawcomponent.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_drawcomponent.scss new file mode 100644 index 000000000..b32c63c0b --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_drawcomponent.scss @@ -0,0 +1,59 @@ +@mixin extjs-drawcomponent { + .#{$prefix}surface { + @include inline-block; + } + + .rvml { + behavior: url(#default#VML); + } + + .#{$prefix}surface tspan { + user-select: none; + -o-user-select: none; + -ms-user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + } + + .#{$prefix}vml-sprite { + position: absolute; + left: 0; + top: 0; + width: 1px; + height: 1px; + } + + .#{$prefix}vml-group { + position: absolute; + left: 0; + top: 0; + width: 1000px; + height: 1000px; + } + + .#{$prefix}vml-measure-span { + position: absolute; + left: -9999em; + top: -9999em; + padding: 0; + margin: 0; + display: inline; + } + + .#{$prefix}vml-base { + position: relative; + top: 0; + left: 0; + overflow: hidden; + display: inline-block; + } + + .#{$prefix}vml-base { + position: relative; + top: 0; + left: 0; + overflow: hidden; + display: inline-block; + } +} + diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_form.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_form.scss new file mode 100644 index 000000000..446554e82 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_form.scss @@ -0,0 +1,8 @@ +@import 'form/all'; +@import 'form/field'; +@import 'form/fieldset'; +@import 'form/file'; +@import 'form/checkbox'; +@import 'form/checkboxgroup'; +@import 'form/triggerfield'; +@import 'form/htmleditor';
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_grid.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_grid.scss new file mode 100644 index 000000000..5c5fb7f16 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_grid.scss @@ -0,0 +1,818 @@ +@mixin extjs-grid { + //main grid view + .#{$prefix}panel { + .#{$prefix}grid-body { + background: $panel-body-background-color; + border-color: $panel-body-border-color; + border-style: $panel-body-border-style; + border-width: 1px; + border-top-color: $grid-header-background-color; + } + + // Still needs left and right border even if it's not visible so that its available width can be calculated correctly + .#{$prefix}grid-header-ct-hidden { + border-top-width: 0 !important; + } + } + + .#{$prefix}grid-header-hidden .#{$prefix}grid-body { + border-top-color: $panel-body-border-color !important; + } + + .#{$prefix}grid-view { + overflow: hidden; + + position: relative; + } + + .#{$prefix}grid-table { + table-layout: fixed; + border-collapse: separate; + } + + .#{$prefix}grid-row .#{$prefix}grid-table { + border-collapse: collapse; + } + + .#{$prefix}grid-locked .#{$prefix}grid-inner-locked { + border-width: 0 1px 0 0 !important; + border-style: solid; + } + + .#{$prefix}grid-header-ct { + cursor: default; + zoom: 1; + padding: 0; + border: 1px solid $panel-body-border-color; + + @if $supports-gradients or $compile-all { + @include background-gradient($grid-header-background-color, $grid-header-background-gradient); + } + } + + @if $include-ie or $compile-all { + .#{$prefix}border-box .#{$prefix}ie9 { + .#{$prefix}grid-header-ct { + padding-left: 1px; + } + } + .#{$prefix}ie6, .#{$prefix}ie7 { + .#{$prefix}grid-header-ct { + padding-left: 1px; + } + } + + } + + .#{$prefix}column-header { + padding: 0; + position: absolute; + overflow: hidden; + + border-right: 1px solid $grid-header-background-color; + border-left: 0 none; + border-top: 0 none; + border-bottom: 0 none; + + text-shadow: 0 1px 0 rgba(255, 255, 255, .3); + font: normal 11px/15px $font-family; + + @if $grid-header-color { + color: $grid-header-color; + } + font: normal ceil($font-size * .9) $font-family; + + @if $supports-gradients or $compile-all { + @include background-gradient($grid-header-background-color, $grid-header-background-gradient); + } + } + + .#{$prefix}group-header { + padding: 0; + border-left-width: 0; + } + .#{$prefix}group-sub-header { + background: transparent; + border-top: 1px solid $grid-header-background-color; + border-left-width: 0; + } + + .#{$prefix}column-header-inner { + zoom: 1; + position: relative; + white-space: nowrap; + line-height: 22px; + padding: $grid-header-padding; + + .#{$prefix}column-header-text { + white-space: nowrap; + } + } + + .#{$prefix}column-header-over, + .#{$prefix}column-header-sort-ASC, + .#{$prefix}column-header-sort-DESC { + border-left-color: $grid-header-over-border-color; + border-right-color: $grid-header-over-border-color; + + @if $supports-gradients or $compile-all { + @include background-gradient($grid-header-over-background-color, $grid-header-over-background-gradient); + } + } + + @if not $supports-gradients or $compile-all { + .#{$prefix}nlg { + .#{$prefix}grid-header-ct, + .#{$prefix}column-header { + background: repeat-x 0 top; + @include theme-background-image($theme-name, 'grid/column-header-bg.gif'); + } + + .#{$prefix}column-header-over, + .#{$prefix}column-header-sort-ASC, + .#{$prefix}column-header-sort-DESC { + background: #ebf3fd repeat-x 0 top; + @include theme-background-image($theme-name, 'grid/column-header-over-bg.gif'); + } + } + } + + .#{$prefix}column-header-trigger { + display: none; + height: 100%; + width: $grid-header-trigger-width; + background: no-repeat left center; + background-color: #c3daf9; + @include theme-background-image($theme-name, 'grid/grid3-hd-btn.gif'); + position: absolute; + right: 0; + top: 0; + z-index: 2; + cursor: pointer; + } + + .#{$prefix}column-header-over, .#{$prefix}column-header-open { + .#{$prefix}column-header-trigger { + display: block; + } + } + + .#{$prefix}column-header-align-right { + text-align: right; + + .#{$prefix}column-header-text { + padding-right: 0.5ex; + margin-right: 6px; + } + } + .#{$prefix}column-header-align-center { + text-align: center; + } + .#{$prefix}column-header-align-left { + text-align: left; + } + + // Sort direction indicator is a background of the text span. + .#{$prefix}column-header-sort-ASC .#{$prefix}column-header-text { + padding-right: 16px; + background: no-repeat right 6px; + @include theme-background-image($theme-name, 'grid/sort_asc.gif'); + } + .#{$prefix}column-header-sort-DESC .#{$prefix}column-header-text { + padding-right: 16px; + background: no-repeat right 6px; + @include theme-background-image($theme-name, 'grid/sort_desc.gif'); + } + + //grid rows + .#{$prefix}grid-row { + line-height: 13px; + + vertical-align: top; + + padding: $grid-row-padding; + + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: ignore; + + .#{$prefix}grid-cell { + @if $grid-row-cell-color { + color: $grid-row-cell-color; + } + font: $grid-row-cell-font; + + border-color: $grid-row-cell-border-color; + border-style: $grid-row-cell-border-style; + border-width: $grid-row-cell-border-width; + border-top-color: lighten($grid-row-cell-border-color, 5); + } + } + + .#{$prefix}grid-rowwrap-div { + border-width: $grid-row-wrap-border-width; + border-color: $grid-row-wrap-border-color; + border-style: $grid-row-wrap-border-style; + border-top-color: lighten($grid-row-wrap-border-color, 5); + + overflow: hidden; + } + + .#{$prefix}grid-row-alt .#{$prefix}grid-cell, + .#{$prefix}grid-row-alt .#{$prefix}grid-rowwrap-div { + background-color: $grid-row-cell-alt-background; + } + + .#{$prefix}grid-row-over .#{$prefix}grid-cell, + .#{$prefix}grid-row-over .#{$prefix}grid-rowwrap-div { + border-color: $grid-row-cell-over-border-color; + + background-color: $grid-row-cell-over-background-color; + } + + .#{$prefix}grid-row-focused .#{$prefix}grid-cell, + .#{$prefix}grid-row-focused .#{$prefix}grid-rowwrap-div { + border-color: $grid-row-cell-focus-border-color; + + background-color: $grid-row-cell-focus-background-color; + } + + .#{$prefix}grid-row-selected .#{$prefix}grid-cell, + .#{$prefix}grid-row-selected .#{$prefix}grid-rowwrap-div { + border-style: $grid-row-cell-selected-border-style; + border-color: $grid-row-cell-selected-border-color; + + background-color: $grid-row-cell-selected-background-color !important; + } + + .#{$prefix}grid-rowwrap-div { + .#{$prefix}grid-cell, + .#{$prefix}grid-cell-inner { + border-width: 0; + + background: transparent; + } + } + + .#{$prefix}grid-row-body-hidden { + display: none; + } + + .#{$prefix}grid-rowbody { + font: $grid-row-body-font; + + padding: $grid-row-body-padding; + + p { + margin: 5px 5px 10px 5px; + } + } + + //grid cells + .#{$prefix}grid-cell { + overflow: hidden; + + font: $grid-cell-font; + + -moz-user-select: none; + -khtml-user-select:none; + -webkit-user-select:ignore; + } + + .#{$prefix}grid-cell-inner { + overflow: hidden; + + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + + padding: $grid-cell-inner-padding; + + white-space: nowrap; + } + + // Action columns with a standard, 16x16 icon require less padding + .#{$prefix}action-col-cell .#{$prefix}grid-cell-inner { + padding: 1px 2px 0 2px; + } + + .#{$prefix}ie6, + .#{$prefix}ie7, + .#{$prefix}quirks .#{$prefix}ie9, + .#{$prefix}quirks .#{$prefix}ie8, + .#{$prefix}strict .#{$prefix}ie8 { + .#{$prefix}action-col-cell .#{$prefix}grid-cell-inner { + padding: 2px 2px 1px 2px; + } + } + + .#{$prefix}grid-row .#{$prefix}grid-cell-special { + padding: 0; + border-right: 1px solid $grid-cell-with-col-lines-border-color; + + @include background-gradient(#f6f6f6, 'grid-cell-special'); + } + + /* + IE6-8 have issues with shrinking the TR to 0px (even w/line-height=0), so we + use an IE-specific trick to make the row disappear. We cannot do this on any + other browser, because it is not a non-standard thing to do and those other + browsers will do whacky things with it. + */ + + .#{$prefix}ie6, + .#{$prefix}ie7, + .#{$prefix}quirks .#{$prefix}ie8, + .#{$prefix}strict .#{$prefix}ie8 { + .#{$prefix}grid-header-row { + position: absolute; + } + } + + .#{$prefix}grid-row-selected .#{$prefix}grid-cell-special { + border-right: 1px solid adjust-color($base-color, $hue: -0.175deg, $saturation: 25.296%, $lightness: -2.549%); + + @include background-gradient($grid-row-cell-selected-background-color, 'grid-cell-special'); + } + + .#{$prefix}grid-dirty-cell { + @include theme-background-image($theme-name, 'grid/dirty.gif'); + background-position: 0 0; + background-repeat: no-repeat; + } + + .#{$prefix}grid-cell-selected { + background-color: #B8CFEE !important; + } + + @if not $supports-gradients or $compile-all { + .#{$prefix}nlg { + .#{$prefix}grid-cell-special { + background-repeat: repeat-y; + background-position: top right; + } + + .#{$prefix}grid-row .#{$prefix}grid-cell-special, + .#{$prefix}grid-row-over .#{$prefix}grid-cell-special { + @include theme-background-image($theme-name, 'grid/cell-special-bg.gif'); + + } + + .#{$prefix}grid-row-focused .#{$prefix}grid-cell-special, + .#{$prefix}grid-row-selected .#{$prefix}grid-cell-special { + @include theme-background-image($theme-name, 'grid/cell-special-selected-bg.gif'); + } + } + } + + //this is panel as gridpanel doesn't use a baseCls + .#{$prefix}panel-with-col-lines .#{$prefix}grid-row .#{$prefix}grid-cell { + padding-right: 0; + border-right: 1px solid $grid-cell-with-col-lines-border-color; + } + + @if $include-ie { + .#{$prefix}ie { + .#{$prefix}grid-cell-special { + border-right-width: 0 !important; + } + } + } + + .#{$prefix}property-grid { + .#{$prefix}grid-row .#{$prefix}grid-cell-inner { + padding: 3px 6px 5px; + } + + .#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner, + .#{$prefix}grid-row-over .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner { + padding-left: 12px; + @include theme-background-image($theme-name, 'grid/property-cell-bg.gif'); + background-repeat: no-repeat; + background-position: -16px 1px; + } + } + + @if $include-ie { + .#{$prefix}quirks .#{$prefix}ie .#{$prefix}grid-row .#{$prefix}grid-property-name .#{$prefix}grid-cell-inner { + background-position: -16px 2px; + } + } + + .#{$prefix}unselectable { + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: ignore; + } + + .#{$prefix}grid-row-body-hidden { + display: none; + } + + .#{$prefix}grid-group-collapsed { + display: none; + } + + //grid expander + .#{$prefix}grid-view { + .#{$prefix}grid-td-expander { + vertical-align: top; + } + } + + .#{$prefix}grid-td-expander { + background: repeat-y right transparent; + } + + .#{$prefix}grid-view { + .#{$prefix}grid-td-expander { + .#{$prefix}grid-cell-inner { + padding: 0 !important; + } + } + } + + .#{$prefix}grid-row-expander { + @include theme-background-image($theme-name, 'grid/group-collapse.gif'); + background-color: transparent; + + width: 9px; + height: 13px; + + margin-left: 3px; + + background-repeat: no-repeat; + background-position: 0 -2px; + } + + .#{$prefix}grid-row-collapsed { + .#{$prefix}grid-row-expander { + @include theme-background-image($theme-name, 'grid/group-expand.gif'); + } + } + + .#{$prefix}grid-resize-marker { + position: absolute; + z-index: 5; + top: 0; + width: 1px; + background-color: #0f0f0f; + } + + //column move icons, when moving columns + .col-move-top, + .col-move-bottom { + width: 9px; + height: 9px; + position: absolute; + top: 0; + line-height: 0; + font-size: 0; + overflow: hidden; + z-index: 20000; + background: no-repeat left top transparent; + } + + .col-move-top { + @include theme-background-image($theme-name, 'grid/col-move-top.gif'); + } + + .col-move-bottom { + @include theme-background-image($theme-name, 'grid/col-move-bottom.gif'); + } + + //pading toolbar + .#{$prefix}tbar-page-number { + width: 30px; + } + + //grouped grid + .#{$prefix}grid-group, + .#{$prefix}grid-group-body, + .#{$prefix}grid-group-hd { + zoom: 1; + } + + .#{$prefix}grid-group-hd { + padding-top: 6px; + + .#{$prefix}grid-cell-inner { + padding: 10px 4px 4px 4px; + + background: $grid-grouped-header-background-color; + + border-width: $grid-grouped-header-border-width; + border-style: $grid-grouped-header-border-style; + border-color: $grid-grouped-header-border-color; + + cursor: pointer; + } + } + + .#{$prefix}grid-group-title { + background: transparent no-repeat 0 -1px; + @include theme-background-image($theme-name, 'grid/group-collapse.gif'); + + color: $grid-grouped-title-color; + font: $grid-grouped-title-font; + + padding: 0 0 0 14px; + } + + .#{$prefix}grid-group-hd-collapsed { + .#{$prefix}grid-group-title { + @include theme-background-image($theme-name, 'grid/group-expand.gif'); + } + } + + .#{$prefix}grid-group-collapsed .#{$prefix}grid-group-body { + display: none; + } + + .#{$prefix}grid-group-collapsed .#{$prefix}grid-group-title { + @include theme-background-image($theme-name, 'grid/group-expand.gif'); + } + + .#{$prefix}group-by-icon { + @include theme-background-image($theme-name, 'grid/group-by.gif'); + } + + .#{$prefix}show-groups-icon { + @include theme-background-image($theme-name, 'grid/group-by.gif'); + } + + .#{$prefix}column-header-checkbox .#{$prefix}column-header-inner { + padding: 1px; + } + + .#{$prefix}grid-cell-special .#{$prefix}grid-cell-inner { + padding: 4px; + } + + .#{$prefix}grid-row-checker, + .#{$prefix}column-header-checkbox .#{$prefix}column-header-text { + height: 14px; + width: 14px; + @include theme-background-image($theme-name, 'grid/unchecked.gif'); + background-position: -1px -1px; + background-repeat: no-repeat; + background-color: transparent; + } + + // Row checker is a div but column header checker is the text span element, so make it display: block + // Header checkbox element needs centering + .#{$prefix}column-header-checkbox .#{$prefix}column-header-text { + display: block; + margin-top: 4px; + margin-left: 4px; + } + + @if $include-ie or $compile-all { + /* All IE Quirks mode need to squish the header height or the line-height will become too tall */ + /* IE6 always needs the hack regardless of quirks/strict */ + .#{$prefix}quirks .#{$prefix}ie, .#{$prefix}ie6 { + .#{$prefix}column-header-checkbox .#{$prefix}column-header-inner { + line-height: 18px; + } + } + + /* IE 6, 7 & 9 are 1px too far to the right when centering, drop the margin 1px. */ + .#{$prefix}ie6, .#{$prefix}ie7, .#{$prefix}ie9 { + .#{$prefix}column-header-checkbox .#{$prefix}column-header-text { + margin-left: 3px; + } + } + } + + .#{$prefix}grid-hd-checker-on .#{$prefix}column-header-text { + @include theme-background-image($theme-name, 'grid/checked.gif'); + } + + .#{$prefix}grid-row-checker { + margin-left: 1px; + + background-position: 50% -2px; + } + + .#{$prefix}grid-row-selected .#{$prefix}grid-row-checker, + .#{$prefix}grid-row-checked .#{$prefix}grid-row-checker { + @include theme-background-image($theme-name, 'grid/checked.gif'); + } + + //grid icons + .#{$prefix}tbar-page-first { + background-image: theme-image($theme-name, 'grid/page-first.gif') !important; + } + + .#{$prefix}tbar-loading { + background-image: theme-image($theme-name, 'grid/refresh.gif') !important; + } + + .#{$prefix}tbar-page-last { + background-image: theme-image($theme-name, 'grid/page-last.gif') !important; + } + + .#{$prefix}tbar-page-next { + background-image: theme-image($theme-name, 'grid/page-next.gif') !important; + } + + .#{$prefix}tbar-page-prev { + background-image: theme-image($theme-name, 'grid/page-prev.gif') !important; + } + + .#{$prefix}item-disabled { + .#{$prefix}tbar-loading { + background-image: theme-image($theme-name, 'grid/refresh-disabled.gif') !important; + } + + .#{$prefix}tbar-page-first { + background-image: theme-image($theme-name, 'grid/page-first-disabled.gif') !important; + } + + .#{$prefix}tbar-page-last { + background-image: theme-image($theme-name, 'grid/page-last-disabled.gif') !important; + } + + .#{$prefix}tbar-page-next { + background-image: theme-image($theme-name, 'grid/page-next-disabled.gif') !important; + } + + .#{$prefix}tbar-page-prev { + background-image: theme-image($theme-name, 'grid/page-prev-disabled.gif') !important; + } + } + + //menu icons + .xg-hmenu-sort-asc .#{$prefix}menu-item-icon { + @include theme-background-image($theme-name, 'grid/hmenu-asc.gif'); + } + + .xg-hmenu-sort-desc .#{$prefix}menu-item-icon { + @include theme-background-image($theme-name, 'grid/hmenu-desc.gif'); + } + + .xg-hmenu-lock .#{$prefix}menu-item-icon { + @include theme-background-image($theme-name, 'grid/hmenu-lock.gif'); + } + + .xg-hmenu-unlock .#{$prefix}menu-item-icon { + @include theme-background-image($theme-name, 'grid/hmenu-unlock.gif'); + } + + .#{$prefix}group-by-icon { + @include theme-background-image($theme-name, 'grid/group-by.gif'); + } + + .#{$prefix}cols-icon .#{$prefix}menu-item-icon { + @include theme-background-image($theme-name, 'grid/columns.gif'); + } + + .#{$prefix}show-groups-icon { + @include theme-background-image($theme-name, 'grid/group-by.gif'); + } + + // Drag/drop indicator styles + .#{$prefix}grid-drop-indicator { + position: absolute; + height: 1px; + line-height: 0px; + background-color: #77BC71; + overflow: visible; + + .#{$prefix}grid-drop-indicator-left { + position: absolute; + top: -8px; + left: -12px; + @include theme-background-image($theme-name, 'grid/dd-insert-arrow-right.png'); + height: 16px; + width: 16px; + } + + .#{$prefix}grid-drop-indicator-right { + position: absolute; + top: -8px; + right: -11px; + @include theme-background-image($theme-name, 'grid/dd-insert-arrow-left.png'); + height: 16px; + width: 16px; + } + } + + .#{$prefix}ie6 { + .#{$prefix}grid-drop-indicator-left { + @include theme-background-image($theme-name, 'grid/dd-insert-arrow-right.gif'); + } + + .#{$prefix}grid-drop-indicator-right { + @include theme-background-image($theme-name, 'grid/dd-insert-arrow-left.gif'); + } + } + + // Row Editor + .#{$prefix}grid-row-editor { + position: absolute !important; + z-index: 1; + zoom: 1; + overflow: visible !important; + + .#{$prefix}form-field { + font: $grid-row-editor-font; + } + .#{$prefix}form-display-field { + font: $grid-row-editor-font; + padding-top: 0; + } + + .#{$prefix}panel-body { + background-color: $grid-row-editor-background-color; + border-top: $grid-row-editor-border; + border-bottom: $grid-row-editor-border; + } + } + + // Perfect alignment of input text with cell text + .#{$prefix}grid-row-editor { + // Align input text with text value in cell + .#{$prefix}form-text { + padding-left: 2px; + } + } + .#{$prefix}grid-editor { + // Align checkboxes input + .#{$prefix}form-cb-wrap { + text-align: center; + } + } + +.#{$prefix}grid-row-editor-buttons { + background-color: $grid-row-editor-background-color; + position: absolute; + bottom: -31px; + padding: 4px; + width: 200px; + height: 32px; + + .#{$prefix}strict & { + width: 192px; + height: 24px; + } + + &-ml, + &-mr, + &-bl, + &-br, + &-bc { + position: absolute; + overflow: hidden; + } + + &-bl, + &-br { + width: 4px; + height: 4px; + bottom: 0px; + @include theme-background-image($theme-name, 'panel/panel-default-framed-corners.gif'); + } + &-bl { + left: 0px; + background-position: 0px -16px; + } + &-br { + right: 0px; + background-position: 0px -20px; + } + + &-bc { + position: absolute; + left: 4px; + bottom: 0px; + width: 192px; + height: 1px; + background-color: $grid-row-editor-border-color; + } + + &-ml, + &-mr { + height: 27px; + width: 1px; + top: 1px; + background-color: $grid-row-editor-border-color; + } + &-ml { + left: 0px + } + &-mr { + background-position: 0px -20px; + right: 0px; + } + } + + .#{$prefix}grid-row-editor-errors { + ul { + margin-left: 5px; + } + li { + list-style: disc; + margin-left: 15px; + } + } +} diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_html.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_html.scss new file mode 100644 index 000000000..a6acf008d --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_html.scss @@ -0,0 +1,126 @@ +/** + * W3C Suggested Default style sheet for HTML 4 + * http://www.w3.org/TR/CSS21/sample.html + */ +@mixin extjs-html { + .#{$prefix}html { + html, + address, + blockquote, + body, + dd, + div, + dl, + dt, + fieldset, + form, + frame, frameset, + h1, + h2, + h3, + h4, + h5, + h6, + noframes, + ol, + p, + ul, + center, + dir, + hr, + menu, + pre { display: block; } + li { display: list-item; list-style: disc; } + head { display: none; } + table { display: table; } + tr { display: table-row; } + thead { display: table-header-group; } + tbody { display: table-row-group; } + tfoot { display: table-footer-group; } + col { display: table-column; } + colgroup { display: table-column-group; } + td, + th { display: table-cell; } + caption { display: table-caption; } + th { font-weight: bolder; text-align: center; } + caption { text-align: center; } + body { margin: 8px; } + h1 { font-size: 2em; margin: .67em 0; } + h2 { font-size: 1.5em; margin: .75em 0; } + h3 { font-size: 1.17em; margin: .83em 0; } + h4, + p, + blockquote, + ul, + fieldset, + form, + ol, + dl, + dir, + menu { margin: 1.12em 0; } + h5 { font-size: .83em; margin: 1.5em 0; } + h6 { font-size: .75em; margin: 1.67em 0; } + h1, + h2, + h3, + h4, + h5, + h6, + b, + strong { font-weight: bolder; } + blockquote { margin-left: 40px; margin-right: 40px; } + i, + cite, + em, + var, + address { font-style: italic; } + pre, + tt, + code, + kbd, + samp { font-family: monospace; } + pre { white-space: pre; } + button, + textarea, + input, + select { display: inline-block; } + big { font-size: 1.17em; } + small, + sub, + sup { font-size: .83em; } + sub { vertical-align: sub; } + sup { vertical-align: super; } + table { border-spacing: 2px; } + thead, + tbody, + tfoot { vertical-align: middle; } + td, + th { vertical-align: inherit; } + s, + strike, + del { text-decoration: line-through; } + hr { border: 1px inset; } + ol, + ul, + dir, + menu, + dd { margin-left: 40px; } + ul, menu, dir { list-style-type: disc; } + ol { list-style-type: decimal; } + ol ul, + ul ol, + ul ul, + ol ol { margin-top: 0; margin-bottom: 0; } + u, + ins { text-decoration: underline; } + br:before { content: "\A"; } + :before, :after { white-space: pre-line; } + center { text-align: center; } + :link, :visited { text-decoration: underline; } + :focus { outline: invert dotted thin; } + + /* Begin bidirectionality settings (do not change) */ + BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override; } + BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override; } + ; } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_loadmask.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_loadmask.scss new file mode 100644 index 000000000..d03b3a03e --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_loadmask.scss @@ -0,0 +1,59 @@ +/** + * @class Ext.LoadMask + * Component used to mask a component + */ +.#{$prefix}mask { + z-index: 100; + + position: absolute; + top: 0; + left: 0; + + @include opacity($loadmask-opacity); + + width: 100%; + height: 100%; + zoom: 1; + + background: $loadmask-backgorund; +} + +.#{$prefix}mask-msg { + z-index: 20001; + + position: absolute; + top: 0; + left: 0; + + padding: $loadmask-msg-padding; + border: 1px solid; + border-color: $loadmask-msg-border-color; + + @if $loadmask-msg-background-gradient { + @if $supports-gradients or $compile-all { + @include background-gradient($loadmask-msg-background-color, $loadmask-msg-background-gradient); + } + } @else { + background: $loadmask-msg-background-color; + } + + div { + padding: $loadmask-msg-inner-padding; + + //if an icon is defined show it + @if $loadmask-msg-inner-icon != null { + background-image: theme-image($theme-name, $loadmask-msg-inner-icon); + background-repeat: no-repeat; + background-position: 5px center; + } + + cursor: wait; + + border: 1px solid $loadmask-msg-inner-border-color; + + background-color: $loadmask-msg-inner-background-color; + + color: $loadmask-msg-inner-color; + font: $loadmask-msg-inner-font; + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_menu.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_menu.scss new file mode 100644 index 000000000..d3a8e040d --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_menu.scss @@ -0,0 +1,185 @@ +/** + * @class Ext.menu.* + */ +@mixin extjs-menu { + .#{$prefix}menu-body { + @include no-select; + background: $menu-background-color !important; + padding: $menu-padding; + } + + .#{$prefix}menu-icon-separator { + position: absolute; + top: 0px; + left: $menu-item-indent; + z-index: 0; + border-left: solid 1px $menu-separator-border-color; + background-color: $menu-separator-background-color; + width: 2px; + height: 100%; + overflow: hidden; + } + + .#{$prefix}menu-plain { + .#{$prefix}menu-icon-separator { + display: none; + } + } + + .#{$prefix}menu-focus { + display: block; + position: absolute; + top: -10px; + left: -10px; + width: 0px; + height: 0px; + } + + .#{$prefix}menu-item { + white-space: nowrap; + overflow: hidden; + z-index: 1; + } + + .#{$prefix}menu-item-cmp { + margin-bottom: 1px; + } + + .#{$prefix}menu-item-link { + display: block; + padding: 0px $menu-padding; + margin: 1px; + text-decoration: none !important; + line-height: 16px; + cursor: default; + } + + @if $include-opera { + .#{$prefix}opera { + // Opera 10.5 absolute positioning of submenu arrow has issues + // This will fix it, and not affect newer Operas + .#{$prefix}menu-item-link { + position: relative; + } + } + } + + .#{$prefix}menu-item-icon { + width: 16px; + height: 16px; + margin: 4px 11px 0px 2px; + background: no-repeat center center; + } + + .#{$prefix}menu-item-text { + position: relative; + font-size: ceil($font-size * .9); + color: $menu-text-color; + top: -4px; + } + + .#{$prefix}menu-item-checked { + .#{$prefix}menu-item-icon { + background-image: theme-image($theme-name, $menu-icon-checked); + } + .#{$prefix}menu-group-icon { + background-image: theme-image($theme-name, $menu-icon-group-checked); + } + } + + .#{$prefix}menu-item-unchecked { + .#{$prefix}menu-item-icon { + background-image: theme-image($theme-name, $menu-icon-unchecked); + } + .#{$prefix}menu-group-icon { + background-image: none; + } + } + + .#{$prefix}menu-item-separator { + height: 2px; + border-top: solid 1px $menu-separator-border-color; + background-color: $menu-separator-background-color; + margin: $menu-padding 0px; + overflow: hidden; + } + + .#{$prefix}menu-item-arrow { + position: absolute; + width: 12px; + height: 9px; + top: 9px; + right: 0px; + background: theme-image($theme-name, $menu-icon-arrow) no-repeat center center; + } + + .#{$prefix}menu-item-indent { + margin-left: $menu-item-indent + $menu-padding + 2px; /* The 2px is the width of the seperator */ + } + + .#{$prefix}menu-item-active { + cursor: pointer; + + .#{$prefix}menu-item-link { + @include background-gradient($menu-item-active-background-color, 'matte'); + margin: 0px; + border: 1px solid $menu-item-active-border-color; + cursor: pointer; + @include border-radius(3px); + } + } + + .#{$prefix}menu-item-disabled { + @include opacity(.5); + } + + @if $include-ie { + .#{$prefix}ie { + .#{$prefix}menu-item-link { + line-height: 17px; + padding-bottom: 1px; + } + + .#{$prefix}menu-item-disabled { + .#{$prefix}menu-item-icon { + @include opacity(.5); + } + + .#{$prefix}menu-item-text { + // IE opacity/cleartype bug workaround + background-color: $menu-background-color; + } + } + + .#{$prefix}strict & { + .#{$prefix}menu-icon-separator { + width: 1px; + } + + .#{$prefix}menu-item-separator { + height: 1px; + } + } + } + + .#{$prefix}ie6, + .#{$prefix}ie7, + .#{$prefix}quirks .#{$prefix}ie8 { + .#{$prefix}menu-item-link { + padding-bottom: $menu-padding; + } + } + } + + @if not $supports-gradients or $compile-all { + .#{$prefix}nlg { + .#{$prefix}menu-item-active .#{$prefix}menu-item-link { + background: $menu-item-active-background-color theme-image($theme-name, $menu-item-active-background-image) repeat-x left top; + } + } + } + + .#{$prefix}menu-date-item { + border-color: #99BBE8; + } +} diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_panel.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_panel.scss new file mode 100644 index 000000000..f338a1af8 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_panel.scss @@ -0,0 +1,442 @@ +/** + * @class Ext.Panel + * Used to create the base structure of an Ext.Panel + */ +@mixin extjs-panel { + .#{$prefix}panel, + .#{$prefix}plain { + overflow: hidden; + position: relative; + } + + @if $include-ie { + // Workaround for disappearing right edge in IE6 + .#{$prefix}ie { + .#{$prefix}panel-header, + .#{$prefix}panel-header-tl, + .#{$prefix}panel-header-tc, + .#{$prefix}panel-header-tr, + .#{$prefix}panel-header-ml, + .#{$prefix}panel-header-mc, + .#{$prefix}panel-header-mr, + .#{$prefix}panel-header-bl, + .#{$prefix}panel-header-bc, + .#{$prefix}panel-header-br { + zoom: 1; + } + } + // Fix for IE8 clipping. EXTJSIV-1553 + .#{$prefix}ie8 { + td.#{$prefix}frame-mc { + vertical-align: top; + } + } + } + + //panel header + .#{$prefix}panel-header { + padding: $panel-header-padding; + } + + .#{$prefix}panel-header-icon, + .#{$prefix}window-header-icon { + width:16px; + height:16px; + background-repeat:no-repeat; + background-position:0 0; + vertical-align:middle; + margin-right:4px; + margin-top:-1px; + margin-bottom:-1px; + } + + .#{$prefix}panel-header-draggable, + .#{$prefix}panel-header-draggable .#{$prefix}panel-header-text, + .#{$prefix}window-header-draggable, + .#{$prefix}window-header-draggable .#{$prefix}window-header-text{ + cursor: move; + } + + // A ghost is just a Panel. The only extra it needs is opacity. + // TODO: Make opacity a variable + .#{$prefix}panel-ghost, .#{$prefix}window-ghost { + @include opacity(0.65); + cursor: move; + } + + .#{$prefix}panel-header-horizontal, .#{$prefix}window-header-horizontal, .#{$prefix}btn-group-header-horizontal { + .#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body { + width: 100%; + } + } + + .#{$prefix}panel-header-vertical, .#{$prefix}window-header-vertical, .#{$prefix}btn-group-header-vertical { + .#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body { + height: 100%; + } + } + + // Vertical headers must be inline blocks so that they acquire width from the content + .#{$prefix}panel-header-vertical, .#{$prefix}panel-header-vertical .#{$prefix}panel-header-body, + .#{$prefix}btn-group-header-vertical, .#{$prefix}btn-group-header-vertical .#{$prefix}btn-group-header-body, + .#{$prefix}window-header-vertical, .#{$prefix}window-header-vertical .#{$prefix}window-header-body { + display: -moz-inline-stack; + display: inline-block; + } + + .#{$prefix}panel-header-text { + @include no-select; + white-space: nowrap; + } + + .#{$prefix}panel-header-left, + .#{$prefix}panel-header-right { + .#{$prefix}vml-base { + left: -3px !important; + } + } + + //panel body + .#{$prefix}panel-body { + overflow: hidden; + position: relative; + + font-size: $panel-body-font-size; + } + + .#{$prefix}panel-header-vertical { + .#{$prefix}surface { + margin-top: 2px; + } + } + + .#{$prefix}panel-header-plain-vertical { + .#{$prefix}surface { + margin-top: 0; + } + } + + + .#{$prefix}panel-collapsed { + .#{$prefix}panel-header-collapsed-border-top { + border-bottom-width: $panel-header-border-width !important; + } + .#{$prefix}panel-header-collapsed-border-right { + border-left-width: $panel-header-border-width !important; + } + .#{$prefix}panel-header-collapsed-border-bottom { + border-top-width: $panel-header-border-width !important; + } + .#{$prefix}panel-header-collapsed-border-left { + border-right-width: $panel-header-border-width !important; + } + } + + @if not $supports-gradients or $compile-all { + .#{$prefix}nlg .#{$prefix}panel-header-vertical { + .#{$prefix}frame-mc { + background-repeat: repeat-y; + } + } + } + + @if $include-panel-uis == true { + @include extjs-panel-ui( + 'default', + + $ui-base-color: $panel-base-color, + $ui-border-width: $panel-border-width, + $ui-border-color: $panel-border-color, + $ui-border-radius: $panel-border-radius, + + $ui-header-color: $panel-header-color, + $ui-header-font-size: $panel-header-font-size, + $ui-header-font-weight: $panel-header-font-weight, + $ui-header-border-color: $panel-header-border-color, + $ui-header-background-color: $panel-header-background-color, + $ui-header-background-gradient: $panel-header-background-gradient, + + $ui-body-color: $panel-body-color, + $ui-body-border-color: $panel-body-border-color, + $ui-body-border-width: 1px, + $ui-body-background-color: $panel-body-background-color + ); + + @include extjs-panel-ui( + 'default-framed', + + $ui-base-color: $panel-base-color, + $ui-border-width: $panel-frame-border-width, + $ui-border-color: $panel-frame-border-color, + $ui-border-radius: $panel-frame-border-radius, + + $ui-header-color: $panel-header-color, + $ui-header-font-size: $panel-header-font-size, + $ui-header-font-weight: $panel-header-font-weight, + $ui-header-border-color: $panel-frame-border-color, + $ui-header-background-color: $panel-header-background-color, + $ui-header-background-gradient: $panel-header-background-gradient, + + $ui-body-color: $panel-body-color, + $ui-body-border-color: $panel-body-border-color, + $ui-body-border-width: 0, + $ui-body-background-color: $panel-frame-background-color + ); + } + + .x-panel-header-plain, + .x-panel-body-plain { + border: 0; + padding: 0; + } +} + +/** + * @class Ext.Panel + * Used to create a visual theme for an Ext.Panel + */ +@mixin extjs-panel-ui( + $ui-label, + + $ui-base-color: null, + + $ui-border-color: null, + $ui-border-radius: null, + $ui-border-width: 0, + + $ui-header-color: null, + $ui-header-font-family: $panel-header-font-family, + $ui-header-font-size: $panel-header-font-size, + $ui-header-font-weight: $panel-header-font-weight, + $ui-header-border-color: $ui-border-color, + $ui-header-background-color: null, + $ui-header-background-gradient: matte, + $ui-header-inner-border-color: null, + + $ui-body-color: null, + $ui-body-border-color: null, + $ui-body-border-width: null, + $ui-body-border-style: solid, + $ui-body-background-color: null, + $ui-body-font-size: null, + $ui-body-font-weight: null +){ + @if $ui-base-color != null { + @if $ui-border-color == null { $ui-border-color: $ui-base-color; } + + @if $ui-header-color == null { $ui-header-color: #fff; } + @if $ui-header-background-color == null { $ui-header-background-color: lighten($ui-base-color, 15); } + } + + @if $ui-header-inner-border-color == null and $ui-header-background-color != null { + $ui-header-inner-border-color: lighten($ui-header-background-color, 10); + } + + .#{$prefix}panel-#{$ui-label} { + @if $ui-border-color != null { border-color: $ui-border-color; } + } + + // header + .#{$prefix}panel-header-#{$ui-label} { + @if $ui-header-font-size != null { font-size: $ui-header-font-size; } + line-height: $panel-header-line-height; + + @if $ui-header-border-color != null { + border-color: $ui-header-border-color; + border-width: $panel-header-border-width; + border-style: $panel-header-border-style; + } + + @if $supports-gradients or $compile-all { + @if $ui-header-background-color != null { @include background-gradient($ui-header-background-color, $ui-header-background-gradient); } + + @if $panel-header-inner-border and $ui-header-inner-border-color != null { + @include inner-border( + $width: $panel-header-inner-border-width, + $color: $ui-header-inner-border-color + ); + } + } + } + + // header background images + @if $ui-header-background-color != null and $ui-header-background-gradient != null { + @if not $supports-gradients or $compile-all { + .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-top { + background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-top-bg.gif'); + } + + .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom { + background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-bottom-bg.gif'); + } + + .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-left { + background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-left-bg.gif'); + } + + .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right { + background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-right-bg.gif'); + } + } + } + + // header text + .#{$prefix}panel-header-text-#{$ui-label} { + @if $ui-header-color != null { color: $ui-header-color; } + + @if $ui-header-font-size != null { font-size: $ui-header-font-size; } + @if $ui-header-font-weight != null { font-weight: $ui-header-font-weight; } + @if $ui-header-font-family != null { font-family: $ui-header-font-family; } + } + + // body + .#{$prefix}panel-body-#{$ui-label} { + @if $ui-body-background-color != null { background: $ui-body-background-color; } + @if $ui-body-border-color != null { border-color: $ui-body-border-color; } + @if $ui-body-color != null { color: $ui-body-color; } + @if $ui-body-font-size != null { font-size: $ui-body-font-size; } + @if $ui-body-font-weight != null { font-size: $ui-body-font-weight; } + + @if $ui-body-border-width != null { + border-width: $ui-body-border-width; + @if $ui-body-border-style != null { border-style: $ui-body-border-style; } + } + } + + .#{$prefix}panel-collapsed { + .#{$prefix}window-header-#{$ui-label}, + .#{$prefix}panel-header-#{$ui-label} { + @if $ui-body-border-color != null { border-color: $ui-body-border-color; } + } + } + + .#{$prefix}panel-header-#{$ui-label}-vertical { + @if $ui-body-border-color != null { border-color: $ui-body-border-color; } + } + + @if $ui-base-color != null { + @if $supports-gradients or $compile-all { + .#{$prefix}panel-header-#{$ui-label}-left, + .#{$prefix}panel-header-#{$ui-label}-right { + @include background-gradient($ui-header-background-color, $ui-header-background-gradient, right); + } + } + } + + @if $ui-border-radius != null { + @include x-frame( + 'panel', + $ui: '#{$ui-label}', + + /* Radius, width, padding and background-color */ + $border-radius : $ui-border-radius, + $border-width : $ui-border-width, + $padding : $panel-frame-padding, + $background-color: $ui-body-background-color + ); + + + @include x-frame('panel-header', '#{$ui-label}-top', top($ui-border-radius) right($ui-border-radius) 0 0, $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient); + @include x-frame('panel-header', '#{$ui-label}-right', 0 right($ui-border-radius) bottom($ui-border-radius) 0, $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right); + @include x-frame('panel-header', '#{$ui-label}-bottom', 0 0 bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient); + @include x-frame('panel-header', '#{$ui-label}-left', top($ui-border-radius) 0 0 left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right); + + .#{$prefix}panel-header-#{$ui-label}-top { + @include inner-border(1px 1px 0 1px, $ui-header-inner-border-color); + } + + .#{$prefix}panel-header-#{$ui-label}-right { + @include inner-border(1px 1px 1px 0, $ui-header-inner-border-color); + } + + .#{$prefix}panel-header-#{$ui-label}-bottom { + @include inner-border(0 1px 1px 1px, $ui-header-inner-border-color); + } + + .#{$prefix}panel-header-#{$ui-label}-left { + @include inner-border(1px 0 1px 1px, $ui-header-inner-border-color); + } + } @else { + .#{$prefix}panel-collapsed { + .#{$prefix}panel-header-#{$ui-label}-top { + @include border-bottom-radius($ui-border-radius); + } + + .#{$prefix}panel-header-#{$ui-label}-right { + @include border-left-radius($ui-border-radius); + } + + .#{$prefix}panel-header-#{$ui-label}-bottom { + @include border-top-radius($ui-border-radius); + } + + .#{$prefix}panel-header-#{$ui-label}-left { + @include border-right-radius($ui-border-radius); + } + } + + .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right { + background-position: top right; + } + + .#{$prefix}panel-header-#{$ui-label}-top { + @include inner-border(1px 0 0 0, $ui-header-inner-border-color); + } + + .#{$prefix}panel-header-#{$ui-label}-right { + @include inner-border(0 1px 0 0, $ui-header-inner-border-color); + } + + .#{$prefix}panel-header-#{$ui-label}-bottom { + @include inner-border(0 0 1px, $ui-header-inner-border-color); + } + + .#{$prefix}panel-header-#{$ui-label}-left { + @include inner-border(0 0 0 1px, $ui-header-inner-border-color); + } + } + + .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom { + background-position: bottom left; + } + + @if $ui-border-radius != null { + .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-top { + border-bottom-width: 1px !important; + } + + .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-right { + border-left-width: 1px !important; + } + + .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-bottom { + border-top-width: 1px !important; + } + + .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-left { + border-right-width: 1px !important; + } + + .#{$prefix}panel-header-#{$ui-label}-collapsed { + @include border-radius($ui-border-radius); + } + + @include x-frame('panel-header', '#{$ui-label}-collapsed-top', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient); + @include x-frame('panel-header', '#{$ui-label}-collapsed-right', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right); + @include x-frame('panel-header', '#{$ui-label}-collapsed-bottom', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient); + @include x-frame('panel-header', '#{$ui-label}-collapsed-left', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right); + } + + //background positioning of images + .#{$prefix}panel-header-#{$ui-label}-right-tc, + .#{$prefix}panel-header-#{$ui-label}-right-mc, + .#{$prefix}panel-header-#{$ui-label}-right-bc { + background-position: right 0; + } + + .#{$prefix}panel-header-#{$ui-label}-bottom-tc, + .#{$prefix}panel-header-#{$ui-label}-bottom-mc, + .#{$prefix}panel-header-#{$ui-label}-bottom-bc { + background-position: 0 bottom; + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_progress-bar.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_progress-bar.scss new file mode 100644 index 000000000..bbd41f647 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_progress-bar.scss @@ -0,0 +1,117 @@ +@mixin extjs-progress { + .#{$prefix}progress { + border-width: $progress-border-width; + border-style: solid; + @include border-radius($progress-border-radius); + + overflow: hidden; + + height: $progress-height; + } + + .#{$prefix}progress-bar { + height: $progress-height - ($progress-border-width * 2); + + overflow: hidden; + position: absolute; + + width: 0; + + @include border-radius($progress-border-radius); + border-right: 1px solid; + border-top: 1px solid; + } + + .#{$prefix}progress-text { + overflow: hidden; + + position: absolute; + + padding: 0 5px; + + height: $progress-height - ($progress-border-width * 2); + + font-weight: $progress-text-font-weight; + font-size: $progress-text-font-size; + line-height: 16px; + text-align: $progress-text-text-align; + } + + .#{$prefix}progress-text-back { + padding-top: 1px; + } + + @if $include-ie or $compile-all { + .#{$prefix}strict .#{$prefix}progress { + height: $progress-height - ($progress-border-width * 2); + } + } + + @include extjs-progress-ui( + 'default', + + $ui-background-color: $progress-background-color, + $ui-border-color: $progress-border-color, + + $ui-bar-background-color: $progress-bar-background-color, + + $ui-color-front: $progress-text-color-front, + $ui-color-back: $progress-text-color-back + ) +} + +/** + * @mixin extjs-progress-ui + */ +@mixin extjs-progress-ui( + $ui-label, + + $ui-base-color: null, + + $ui-border-color: null, + $ui-background-color: null, + + $ui-bar-background-color: null, + $ui-bar-background-gradient: glossy, + + $ui-color-front: null, + $ui-color-back: null +){ + @if $ui-base-color != null { + @if $ui-border-color == null { $ui-border-color: $ui-base-color; } + @if $ui-bar-background-color == null { $ui-bar-background-color: $ui-base-color; } + @if $ui-color-front == null { $ui-color-front: lighten($ui-base-color, 60); } + @if $ui-color-back == null { $ui-color-back: darken($ui-base-color, 60); } + } + + .#{$prefix}progress-#{$ui-label} { + @if $ui-border-color != null { border-color: $ui-border-color; } + + .#{$prefix}progress-bar { + @if $ui-border-color != null { border-right-color: $ui-border-color; } + @if $ui-border-color != null { border-top-color: lighten($ui-border-color, 25); } + + @if $ui-bar-background-color != null { @include background-gradient($ui-bar-background-color, $ui-bar-background-gradient); } + } + + .#{$prefix}progress-text { + @if $ui-color-front != null { color: $ui-color-front; } + } + + .#{$prefix}progress-text-back { + @if $ui-color-back != null { color: $ui-color-back; } + } + } + + @if $ui-background-color != null { + @if not $supports-gradients or $compile-all { + .#{$prefix}nlg { + .#{$prefix}progress-#{$ui-label} { + .#{$prefix}progress-bar { + background: theme-image($theme-name, 'progress/progress-#{$ui-label}-bg.gif') repeat-x; + } + } + } + } + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_qtip.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_qtip.scss new file mode 100644 index 000000000..2f15fadaa --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_qtip.scss @@ -0,0 +1,164 @@ +@mixin extjs-qtip { + .#{$prefix}tip { + position: absolute; + overflow: visible; /*pointer needs to be able to stick out*/ + border-color: $tip-border-color; + + .#{$prefix}tip-header { + .#{$prefix}box-item { + padding: $tip-header-padding; + } + + .#{$prefix}tool { + padding: 0px 1px 0 0 !important; + } + } + } + + @include x-frame( + $cls: 'tip', + $border-radius: $tip-border-radius, + $border-width: $tip-border-width, + $background-color: $tip-background-color, + $background-gradient: $tip-background-gradient, + $table: true + ); + + .#{$prefix}tip-header-text { + @include no-select; + + color: $tip-header-color; + font-size: $tip-header-font-size; + font-weight: $tip-header-font-weight; + } + + .#{$prefix}tip-header-draggable { + .#{$prefix}tip-header-text { + cursor: move; + } + } + + // Tip is a Panel. It uses dock layout. Body style must be the same + .#{$prefix}tip-body, + .#{$prefix}form-invalid-tip-body { + overflow: hidden; + position: relative; + padding: $tip-body-padding; + } + + .#{$prefix}tip-header, + .#{$prefix}tip-body, + .#{$prefix}form-invalid-tip-body { + color: $tip-body-color; + font-size: $tip-body-font-size; + font-weight: $tip-body-font-weight; + a { + color: $tip-body-link-color; + } + } + + .#{$prefix}tip-anchor { + position: absolute; + + overflow: hidden; + + height: 0; + width: 0; + + border-style: solid; + border-width: 5px; + border-color: $tip-border-color; + + zoom: 1; + } + + .#{$prefix}border-box .#{$prefix}tip-anchor { + width: 10px; + height: 10px; + } + + .#{$prefix}tip-anchor-top { + border-top-color: transparent; + border-left-color: transparent; + border-right-color: transparent; + + @if $include_ie { + _border-top-color: pink; + _border-left-color: pink; + _border-right-color: pink; + _filter: chroma(color=pink); + } + } + + .#{$prefix}tip-anchor-bottom { + border-bottom-color: transparent; + border-left-color: transparent; + border-right-color: transparent; + + @if $include_ie { + _border-bottom-color: pink; + _border-left-color: pink; + _border-right-color: pink; + _filter: chroma(color=pink); + } + } + + .#{$prefix}tip-anchor-left { + border-top-color: transparent; + border-bottom-color: transparent; + border-left-color: transparent; + + @if $include-ie { + _border-top-color: pink; + _border-bottom-color: pink; + _border-left-color: pink; + _filter: chroma(color=pink); + } + } + + .#{$prefix}tip-anchor-right { + border-top-color: transparent; + border-bottom-color: transparent; + border-right-color: transparent; + + @if $include-ie { + _border-top-color: pink; + _border-bottom-color: pink; + _border-right-color: pink; + _filter: chroma(color=pink); + } + } + + //error qtip + .#{$prefix}form-invalid-tip { + border-color: $tip-error-border-color; + + @include inner-border( + $width: 1px, + $color: $tip-error-inner-border-color + ); + } + + .#{$prefix}form-invalid-tip-body { + background: 1px 1px no-repeat; + @include theme-background-image($theme-name, 'form/exclamation.gif'); + padding-left: 22px; + + li { + margin-bottom: 4px; + &.last { + margin-bottom: 0; + } + } + } + + @include x-frame( + $cls: 'form-invalid-tip', + $ui: 'default', + $border-radius: $tip-error-border-radius, + $border-width: $tip-error-border-width, + $background-color: $tip-error-background-color, + $background-gradient: $tip-background-gradient, + $table: true + ); +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_slider.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_slider.scss new file mode 100644 index 000000000..ee5f09e24 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_slider.scss @@ -0,0 +1,143 @@ +@mixin extjs-slider { + .#{$prefix}slider { + zoom:1; + } + + .#{$prefix}slider-inner { + position:relative; + left:0; + top:0; + overflow:visible; + zoom:1; + } + + .#{$prefix}slider-focus { + position:absolute; + left:0; + top:0; + width:1px; + height:1px; + line-height:1px; + font-size:1px; + -moz-outline:0 none; + outline:0 none; + -moz-user-select: none; + -khtml-user-select:none; + -webkit-user-select:ignore; + display:block; + overflow:hidden; + } + + /* Horizontal styles */ + .#{$prefix}slider-horz { + padding-left:7px; + background:transparent no-repeat 0 -24px; + } + + .#{$prefix}slider-horz .#{$prefix}slider-end { + padding-right:7px; + zoom:1; + background:transparent no-repeat right -46px; + } + + .#{$prefix}slider-horz .#{$prefix}slider-inner { + background:transparent repeat-x 0 -2px; + height:18px; + } + + .#{$prefix}slider-horz .#{$prefix}slider-thumb { + width:14px; + height:15px; + position:absolute; + left:0; + top:1px; + background:transparent no-repeat 0 0; + } + + .#{$prefix}slider-horz .#{$prefix}slider-thumb-over { + background-position: -14px -15px; + } + + .#{$prefix}slider-horz .#{$prefix}slider-thumb-drag { + background-position: -28px -30px; + } + + /* Vertical styles */ + .#{$prefix}slider-vert { + padding-top:7px; + background:transparent no-repeat -44px 0; + } + + .#{$prefix}slider-vert .#{$prefix}slider-end { + padding-bottom:7px; + zoom:1; + background:transparent no-repeat -22px bottom; + width:22px; + } + + .#{$prefix}slider-vert .#{$prefix}slider-inner { + background:transparent repeat-y 0 0; + width:22px; + } + + .#{$prefix}slider-vert .#{$prefix}slider-thumb { + width:15px; + height:14px; + position:absolute; + left:3px; + bottom:0; + background:transparent no-repeat 0 0; + } + + .#{$prefix}slider-vert .#{$prefix}slider-thumb-over { + background-position: -15px -14px; + } + + .#{$prefix}slider-vert .#{$prefix}slider-thumb-drag { + background-position: -30px -28px; + } + + .#{$prefix}slider-horz, + .#{$prefix}slider-horz .#{$prefix}slider-end, + .#{$prefix}slider-horz .#{$prefix}slider-inner { + background-image: theme-image($theme-name, 'slider/slider-bg.png'); + } + + .#{$prefix}slider-horz .#{$prefix}slider-thumb { + background-image: theme-image($theme-name, 'slider/slider-thumb.png'); + } + + .#{$prefix}slider-vert, + .#{$prefix}slider-vert .#{$prefix}slider-end, + .#{$prefix}slider-vert .#{$prefix}slider-inner { + background-image: theme-image($theme-name, 'slider/slider-v-bg.png'); + } + + .#{$prefix}slider-vert .#{$prefix}slider-thumb { + background-image: theme-image($theme-name, 'slider/slider-v-thumb.png'); + } + + @if $include-ie { + .#{$prefix}ie6 { + .#{$prefix}slider-horz, + .#{$prefix}slider-horz .#{$prefix}slider-end, + .#{$prefix}slider-horz .#{$prefix}slider-inner { + background-image: theme-image($theme-name, 'slider/slider-bg.gif'); + } + + .#{$prefix}slider-horz .#{$prefix}slider-thumb { + background-image: theme-image($theme-name, 'slider/slider-thumb.gif'); + } + + .#{$prefix}slider-vert, + .#{$prefix}slider-vert .#{$prefix}slider-end, + .#{$prefix}slider-vert .#{$prefix}slider-inner { + background-image: theme-image($theme-name, 'slider/slider-v-bg.gif'); + } + + .#{$prefix}slider-vert .#{$prefix}slider-thumb { + background-image: theme-image($theme-name, 'slider/slider-v-thumb.gif'); + } + } + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_tab.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_tab.scss new file mode 100644 index 000000000..3b07d0ac3 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_tab.scss @@ -0,0 +1,476 @@ +/** + * @class Ext.Tab + */ +@mixin extjs-tab { + @include x-frame( + $cls: 'tab', + $ui: 'default-top', + $border-radius: $tab-top-border-radius, + $border-width: $tab-top-border-width, + $background-color: $tab-base-color, + $background-gradient: $tab-background-gradient, + $background-direction: top, + $table: true + ); + + @include x-frame( + $cls: 'tab', + $ui: 'default-bottom', + $border-radius: $tab-bottom-border-radius, + $border-width: $tab-bottom-border-width, + $background-color: $tab-base-color, + $background-gradient: $tab-background-gradient, + $background-direction: bottom, + $table: true + ); + + .#{$prefix}tab { + z-index: 1; + margin: 0 0 0 $tab-spacing; + display: inline-block; + zoom: 1; + *display: inline; + white-space: nowrap; + height: $tab-height; + border-color: $tab-border-color; + cursor: pointer; + cursor: hand; + + * { + cursor: pointer; + cursor: hand; + } + + em { + display: block; + padding: 0 6px; + line-height: 1px; + } + + button { + background: none; + border: 0; + padding: 0; + margin: 0; + -webkit-appearance: none; + font-size: $tab-font-size; + @if $tab-font-weight { + font-weight: $tab-font-weight; + } + @if $tab-font-family { + $font-family: $tab-font-family; + } + + color: $tab-color; + outline: 0 none; + + overflow: hidden; + overflow-x: visible; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + + &::-moz-focus-inner { + border: 0; + padding: 0; + } + + .#{$prefix}tab-inner { + background-color: transparent; + background-repeat: no-repeat; + background-position: 0 -2px; + display: block; + text-align: center; + white-space: nowrap; + } + } + + img { + display: none; + } + } + + .#{$prefix}border-box { + .#{$prefix}tab-default-top { + height: $tab-height + top($tabbar-top-strip-border-width); + } + .#{$prefix}tab-default-bottom { + height: $tab-height + bottom($tabbar-bottom-strip-border-width); + } + } + + @if $include-ie { + * html .#{$prefix}ie { + .#{$prefix}tab button { + width: 1px; + } + } + + .#{$prefix}strict .#{$prefix}ie6, + .#{$prefix}strict .#{$prefix}ie7 { + .#{$prefix}tab .#{$prefix}frame-mc { + height: 100%; + } + } + + .#{$prefix}ie .#{$prefix}tab-active button:active { + position: relative; + top: -1px; + left: -1px; + } + } + + $framepad: max(top($tab-top-border-radius), right($tab-top-border-radius)) - top($tab-top-border-width); + + .#{$prefix}tab-default-top { + @if $tab-inner-border { + @include inner-border( + $width: $tab-top-inner-border-width, + $color: $tab-inner-border-color + ); + } + + border-bottom: 1px solid $tabbar-strip-border-color !important; + + em { + padding-bottom: $framepad; + } + + button, + .#{$prefix}tab-inner { + height: $tab-height - $framepad * 2 - top($tab-top-border-width); + line-height: $tab-height - $framepad * 2 - top($tab-top-border-width); + } + } + + .#{$prefix}nbr .#{$prefix}tab-default-top { + border-bottom-width: 1px !important; + } + + .#{$prefix}tab-default-top-active { + border-bottom-color: $tabbar-strip-background-color !important; + } + + $framepad: max(bottom($tab-bottom-border-radius), left($tab-bottom-border-radius)) - bottom($tab-bottom-border-width); + + .#{$prefix}tab-default-bottom { + @if $tab-inner-border { + @include inner-border( + $width: $tab-bottom-inner-border-width, + $color: $tab-inner-border-color + ); + } + + border-top: 1px solid $tabbar-strip-border-color !important; + + @include inner-border( + $width: $tab-bottom-inner-border-width, + $color: $tab-inner-border-color + ); + + em { + padding-top: $framepad; + } + + button, + .#{$prefix}tab-inner { + height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width); + line-height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width); + } + } + + .#{$prefix}nbr .#{$prefix}tab-default-bottom { + border-top-width: 1px !important; + } + + .#{$prefix}tab-default-bottom-active { + border-top-color: $tabbar-strip-background-color !important; + } + + .#{$prefix}tab-default-disabled { + cursor: default; + + * { + cursor: default; + } + + border-color: $tab-border-color-disabled; + @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled); + + button { + color: $tab-color-disabled !important; + } + } + + .#{$prefix}tab-icon-text-left { + .#{$prefix}tab-inner { + padding-left: 20px; + } + } + + .#{$prefix}tab { + button, a { + position: relative; + + .#{$prefix}tab-icon { + position: absolute; + background-repeat: no-repeat; + top: 0; + left:0; + right:auto; + bottom:0; + width: 18px; + height: 18px; + } + } + } + + //over + .#{$prefix}tab-over { + @if $tab-border-color-over != $tab-border-color { + border-color: $tab-border-color-over; + } + + button { + @if $tab-color-over != $tab-color { + color: $tab-color-over; + } + @if $tab-font-weight-over != $tab-font-weight { + font-weight: $tab-font-weight-over; + } + @if $tab-font-size-over != $tab-font-size { + font-size: $tab-font-size-over; + } + @if $tab-font-family-over != $tab-font-family { + font-family: $tab-font-family-over; + } + } + } + + .#{$prefix}tab-top-over { + @include background-gradient($tab-base-color-over, $tab-background-gradient-over, top); + } + .#{$prefix}tab-bottom-over { + @include background-gradient($tab-base-color-over, $tab-background-gradient-over, bottom); + } + + //active + .#{$prefix}tab-active { + z-index: 3; + @if $tab-border-color-active != $tab-border-color { + border-color: $tab-border-color-active; + } + + button { + @if $tab-color-active != $tab-color { + color: $tab-color-active; + } + @if $tab-font-weight-active != $tab-font-weight { + font-weight: $tab-font-weight-active; + } + @if $tab-font-size-active != $tab-font-size { + font-size: $tab-font-size-active; + } + @if $tab-font-family-active != $tab-font-family { + font-family: $tab-font-family-active; + } + } + } + + .#{$prefix}tab-top-active { + @include background-gradient($tab-base-color-active, $tab-background-gradient-active, top); + } + .#{$prefix}tab-bottom-active { + @include background-gradient($tab-base-color-active, $tab-background-gradient-active, bottom); + } + + //disabled + .#{$prefix}tab-disabled { + @if $tab-border-color-disabled != $tab-border-color { + border-color: $tab-border-color-disabled; + } + + button { + @if $tab-color-disabled != $tab-color { + color: $tab-color-disabled; + } + @if $tab-font-weight-disabled != $tab-font-weight { + font-weight: $tab-font-weight-disabled; + } + @if $tab-font-size-disabled != $tab-font-size { + font-size: $tab-font-size-disabled; + } + @if $tab-font-family-disabled != $tab-font-family { + font-family: $tab-font-family-disabled; + } + } + } + + .#{$prefix}tab-top-disabled { + background-image: none; + background: transparent; + @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, top); + } + .#{$prefix}tab-bottom-disabled { + background-image: none; + background: transparent; + @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, bottom); + } + + @if not $supports-gradients or $compile-all { + .#{$prefix}nlg { + .#{$prefix}tab-top { background-image: theme-image($theme-name, 'tab/tab-default-top-bg.gif'); } + .#{$prefix}tab-bottom { background-image: theme-image($theme-name, 'tab/tab-default-bottom-bg.gif'); } + + .#{$prefix}tab-top-over { background-image: theme-image($theme-name, 'tab/tab-default-top-over-bg.gif'); } + .#{$prefix}tab-bottom-over { background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); } + + .#{$prefix}tab-top-active { background-image: theme-image($theme-name, 'tab/tab-default-top-active-bg.gif'); } + .#{$prefix}tab-bottom-active { background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); } + + .#{$prefix}tab-top-disabled { background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-bg.gif') !important; } + .#{$prefix}tab-bottom-disabled { background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif') !important; } + } + } + + .#{$prefix}tab-closable em { + padding-right: $tab-closable-icon-width + 3; + } + + .#{$prefix}tab-close-btn { + position: absolute !important; + top: $tab-closable-icon-top; + right: $tab-closable-icon-right; + width: $tab-closable-icon-width; + height: $tab-closable-icon-height; + font-size: 0; + line-height: 0; + text-indent: -999px; + background: theme-image($theme-name, $tab-closable-icon) no-repeat; + @include opacity(.6); + } + .#{$prefix}tab-close-btn:hover { + @include opacity(1); + } + + @if not $supports-border-radius or $compile-all { + .#{$prefix}nbr { + .#{$prefix}tab-top-over { + .#{$prefix}frame-tl, + .#{$prefix}frame-bl, + .#{$prefix}frame-tr, + .#{$prefix}frame-br, + .#{$prefix}frame-tc, + .#{$prefix}frame-bc { + background-image: theme-image($theme-name, 'tab/tab-default-top-over-corners.gif'); + } + .#{$prefix}frame-ml, + .#{$prefix}frame-mr { + background-image: theme-image($theme-name, 'tab/tab-default-top-over-sides.gif'); + } + .#{$prefix}frame-mc { + background-color: $tab-base-color-over; + background-repeat: repeat-x; + background-image: theme-image($theme-name, 'tab/tab-default-top-over-bg.gif'); + } + } + + .#{$prefix}tab-bottom-over { + .#{$prefix}frame-tl, + .#{$prefix}frame-bl, + .#{$prefix}frame-tr, + .#{$prefix}frame-br, + .#{$prefix}frame-tc, + .#{$prefix}frame-bc { + background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-corners.gif'); + } + .#{$prefix}frame-ml, + .#{$prefix}frame-mr { + background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-sides.gif'); + } + .#{$prefix}frame-mc { + background-color: $tab-base-color-over; + background-repeat: repeat-x; + background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); + } + } + + .#{$prefix}tab-top-active { + .#{$prefix}frame-tl, + .#{$prefix}frame-bl, + .#{$prefix}frame-tr, + .#{$prefix}frame-br, + .#{$prefix}frame-tc, + .#{$prefix}frame-bc { + background-image: theme-image($theme-name, 'tab/tab-default-top-active-corners.gif'); + } + .#{$prefix}frame-ml, + .#{$prefix}frame-mr { + background-image: theme-image($theme-name, 'tab/tab-default-top-active-sides.gif'); + } + .#{$prefix}frame-mc { + background-color: $tab-base-color-active; + background-repeat: repeat-x; + background-image: theme-image($theme-name, 'tab/tab-default-top-active-bg.gif'); + } + } + + .#{$prefix}tab-bottom-active { + .#{$prefix}frame-tl, + .#{$prefix}frame-bl, + .#{$prefix}frame-tr, + .#{$prefix}frame-br, + .#{$prefix}frame-tc, + .#{$prefix}frame-bc { + background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-corners.gif'); + } + .#{$prefix}frame-ml, + .#{$prefix}frame-mr { + background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-sides.gif'); + } + .#{$prefix}frame-mc { + background-color: $tab-base-color-active; + background-repeat: repeat-x; + background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); + } + } + + .#{$prefix}tab-top-disabled { + .#{$prefix}frame-tl, + .#{$prefix}frame-bl, + .#{$prefix}frame-tr, + .#{$prefix}frame-br, + .#{$prefix}frame-tc, + .#{$prefix}frame-bc { + background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-corners.gif'); + } + .#{$prefix}frame-ml, + .#{$prefix}frame-mr { + background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-sides.gif'); + } + .#{$prefix}frame-mc { + background-repeat: repeat-x; + background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-bg.gif'); + } + } + + .#{$prefix}tab-bottom-disabled { + .#{$prefix}frame-tl, + .#{$prefix}frame-bl, + .#{$prefix}frame-tr, + .#{$prefix}frame-br, + .#{$prefix}frame-tc, + .#{$prefix}frame-bc { + background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-corners.gif'); + } + .#{$prefix}frame-ml, + .#{$prefix}frame-mr { + background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-sides.gif'); + } + .#{$prefix}frame-mc { + background-repeat: repeat-x; + background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif'); + } + } + } + } +} diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_tabbar.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_tabbar.scss new file mode 100644 index 000000000..519171428 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_tabbar.scss @@ -0,0 +1,151 @@ +/** + * @class Ext.tab.Bar + */ +@mixin extjs-tabbar { + .#{$prefix}tab-bar { + position: relative; + background-color: transparent; + @include background-gradient($tabbar-base-color, $tabbar-background-gradient); + font-size: $tab-font-size; + } + + .#{$prefix}nlg .#{$prefix}tab-bar { + background-image: theme-image($theme-name, 'tab-bar/tab-bar-bg.gif'); + } + + .#{$prefix}tab-bar-default-plain, + .#{$prefix}nlg .#{$prefix}tab-bar-default-plain { + background: transparent none; + } + + + .#{$prefix}tab-bar-body { + border-style: solid; + border-color: $tabbar-border-color; + + position: relative; + z-index: 2; + zoom: 1; + } + + @mixin tab-bar-top($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) { + .#{$prefix}#{$toolbarCls} { + .#{$prefix}#{$bodyCls} { + height: $tab-height; + border-width: $body-border-width; + padding: $body-padding; + } + + .#{$prefix}#{$stripCls} { + /*position strip from top rather than bottom to avoid off-by-one error in IE6*/ + top: $tab-height + top($body-border-width) + top($body-padding); + border-width: $strip-border-width; + height: $strip-height - vertical($strip-border-width); + } + } + .#{$prefix}border-box { + .#{$prefix}#{$toolbarCls} { + .#{$prefix}#{$bodyCls} { + height: $tab-height + vertical($body-border-width) + vertical($body-padding); + } + + .#{$prefix}#{$stripCls} { + height: $strip-height; + } + } + } + } + + @mixin tab-bar-bottom($toolbarCls, $bodyCls, $stripCls, $body-padding, $body-border-width, $strip-border-width, $strip-height) { + .#{$prefix}#{$toolbarCls} { + .#{$prefix}#{$bodyCls} { + height: $tab-height; + border-width: $body-border-width; + padding: $body-padding; + + .#{$prefix}box-inner { + position: relative; + top: 0 - bottom($strip-border-width); + } + + .#{$prefix}box-scroller, + .#{$prefix}box-scroller-left, + .#{$prefix}box-scroller-right { + height: $tab-height + bottom($body-padding) + bottom($strip-border-width); + } + } + + .#{$prefix}#{$stripCls} { + top: top($body-border-width); + border-width: $strip-border-width; + height: $strip-height - vertical($strip-border-width); + } + } + .#{$prefix}border-box { + .#{$prefix}#{$toolbarCls} { + .#{$prefix}#{$bodyCls} { + height: $tab-height + vertical($body-border-width) + vertical($body-padding); + } + + .#{$prefix}#{$stripCls} { + height: $strip-height; + } + } + } + } + + + /* Top Tabs */ + @include tab-bar-top( + "tab-bar-top", + "tab-bar-body", + "tab-bar-strip", + $tabbar-top-body-padding, + $tabbar-top-body-border-width, + $tabbar-top-strip-border-width, + $tabbar-strip-height + ); + @include tab-bar-top( + "tab-bar-top", + "tab-bar-body-default-plain", + "tab-bar-strip-default-plain", + $tabbar-top-plain-body-padding, + $tabbar-top-plain-body-border-width, + $tabbar-top-strip-border-width, + $tabbar-strip-height + ); + + /* Bottom Tabs */ + @include tab-bar-bottom( + "tab-bar-bottom", + "tab-bar-body", + "tab-bar-strip", + $tabbar-bottom-body-padding, + $tabbar-bottom-body-border-width, + $tabbar-bottom-strip-border-width, + $tabbar-strip-height + ); + + @include tab-bar-bottom( + "tab-bar-bottom", + "tab-bar-body-default-plain", + "tab-bar-strip-default-plain", + $tabbar-bottom-plain-body-padding, + $tabbar-bottom-plain-body-border-width, + $tabbar-bottom-strip-border-width, + $tabbar-strip-height + ); + + .#{$prefix}tab-bar-strip-default, + .#{$prefix}tab-bar-strip-default-plain { + font-size: 0; + line-height: 0; + position: absolute; + z-index: 1; + border-style: solid; + overflow: hidden; + border-color: $tabbar-strip-border-color; + background-color: $tabbar-strip-background-color; + zoom: 1; + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_toolbar.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_toolbar.scss new file mode 100644 index 000000000..c3034af62 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_toolbar.scss @@ -0,0 +1,158 @@ +@mixin extjs-toolbar { + .#{$prefix}toolbar { + font-size: $toolbar-font-size; + + border: 1px solid; + + padding: $toolbar-vertical-spacing 0 $toolbar-vertical-spacing $toolbar-horizontal-spacing; + + .#{$prefix}form-item-label{ + font-size: $toolbar-font-size; + line-height: 15px; + } + + .#{$prefix}toolbar-item { + margin: 0 $toolbar-horizontal-spacing 0 0; + } + + .#{$prefix}toolbar-text { + margin-left: 4px; + margin-right: 6px; + white-space: nowrap; + color: $toolbar-text-color !important; + line-height: $toolbar-text-line-height; + font-family: $toolbar-text-font-family; + font-size: $toolbar-text-font-size; + font-weight: $toolbar-text-font-weight; + } + + .#{$prefix}toolbar-separator { + display: block; + font-size: 1px; + overflow: hidden; + cursor: default; + border: 0; + } + + .#{$prefix}toolbar-separator-horizontal { + margin: 0 3px 0 2px; + + height: 14px; + width: 0px; + + border-left: 1px solid $toolbar-separator-color; + border-right: 1px solid $toolbar-separator-highlight-color; + } + } + + @if $include-ie { + .#{$prefix}quirks .#{$prefix}ie .#{$prefix}toolbar .#{$prefix}toolbar-separator-horizontal { + width: 2px; + } + } + + .#{$prefix}toolbar-footer { + background: transparent; + border: 0px none; + margin-top: 3px; + + padding: $toolbar-footer-vertical-spacing 0 $toolbar-footer-vertical-spacing $toolbar-footer-horizontal-spacing; + + .#{$prefix}box-inner { + border-width: 0; + } + + .#{$prefix}toolbar-item { + margin: 0 $toolbar-footer-horizontal-spacing 0 0; + } + } + + .#{$prefix}toolbar-vertical { + padding: $toolbar-vertical-spacing $toolbar-horizontal-spacing 0 $toolbar-horizontal-spacing; + + .#{$prefix}toolbar-item { + margin: 0 0 $toolbar-horizontal-spacing 0; + } + + .#{$prefix}toolbar-text { + margin-top: 4px; + margin-bottom: 6px; + } + + .#{$prefix}toolbar-separator-vertical { + margin: 2px 5px 3px 5px; + + height: 0px; + width: 10px; + line-height: 0px; + + border-top: 1px solid $toolbar-separator-color; + border-bottom: 1px solid $toolbar-separator-highlight-color; + } + } + + .#{$prefix}toolbar-scroller { + padding-left: 0; + } + + .#{$prefix}toolbar-spacer { + width: $toolbar-spacer-width; + } + + // Background for overflow button inserted by the Menu box overflow handler within a toolbar + .#{$prefix}toolbar-more-icon { + background-image: theme-image($theme-name, 'toolbar/more.gif') !important; + background-position: 2px center !important; + background-repeat: no-repeat; + } + + @include extjs-toolbar-ui( + 'default', + $background-color: $toolbar-background-color, + $background-gradient: $toolbar-background-gradient, + $border-color: $tabbar-border-color + ); + + //plain toolbars have no border + //by default they get no color, so they are transparent. IE6 doesnt support transparent borders + //so we must set the width to 0. + .#{$prefix}toolbar-plain { + border: 0; + } +} + +/** + * @mixin ext-toolbar-ui + * @class Ext.toolbar.Toolbar + * @param {String} $ui The name of the UI + * @param {Color} $background-color The background color of the toolbar (defaults to transparent) + * @param {Gradient/color-stops} $background-gradient The background gradient of the toolbar (defaults to null) + * @param {Color} $border-color The border color of the toolbar (defaults to null) + */ +@mixin extjs-toolbar-ui( + $ui, + + $background-color: transparent, + $background-gradient: null, + + $border-color: null +) { + .#{$prefix}toolbar-#{$ui} { + @if $border-color != null { + border-color: $border-color; + } + + @include background-gradient($background-color, $background-gradient); + } + + @if not $supports-gradients or $compile-all { + @if $background-gradient != null { + .#{$prefix}nlg { + .#{$prefix}toolbar-#{$ui} { + background-image: theme-image($theme-name, 'toolbar/toolbar-#{$ui}-bg.gif') !important; + background-repeat: repeat-x; + } + } + } + } +} diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_tree.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_tree.scss new file mode 100644 index 000000000..a09d06ebb --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_tree.scss @@ -0,0 +1,260 @@ +@mixin extjs-tree { + .#{$prefix}tree-no-lines .#{$prefix}tree-elbow { + background-color: transparent; + } + + .#{$prefix}tree-no-lines .#{$prefix}tree-elbow-end { + background-color: transparent; + } + + .#{$prefix}tree-no-lines .#{$prefix}tree-elbow-line { + background-color: transparent; + } + + //arrows + .#{$prefix}tree-arrows .#{$prefix}tree-elbow-plus { + background: transparent no-repeat 0 0; + } + + .#{$prefix}tree-arrows .#{$prefix}tree-elbow-end-plus { + background: transparent no-repeat 0 0; + } + + .#{$prefix}tree-arrows .#{$prefix}tree-elbow-end-minus { + background: transparent no-repeat -16px 0; + } + + .#{$prefix}tree-arrows .#{$prefix}tree-elbow-minus { + background: transparent no-repeat -16px 0; + } + + .#{$prefix}tree-arrows .#{$prefix}tree-elbow { + background-color: transparent !important; + } + + .#{$prefix}tree-arrows .#{$prefix}tree-elbow-end { + background-color: transparent !important; + } + + .#{$prefix}tree-arrows .#{$prefix}tree-elbow-line { + background-color: transparent !important; + } + + //elbows + .#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-plus, + .#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-end-plus { + background-position: -32px 0; + } + + .#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-minus, + .#{$prefix}tree-arrows .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-end-minus { + background-position: -48px 0; + } + + .#{$prefix}tree-arrows .x-grid-tree-node-expanded .#{$prefix}tree-elbow-plus, + .#{$prefix}tree-arrows .x-grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus { + background-position: -16px 0; + } + + .#{$prefix}tree-arrows .x-grid-tree-node-expanded .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-plus, + .#{$prefix}tree-arrows .x-grid-tree-node-expanded .#{$prefix}tree-expander-over .#{$prefix}tree-elbow-end-plus { + background-position: -48px 0; + } + + .#{$prefix}tree-elbow-plus, + .#{$prefix}tree-elbow-minus, + .#{$prefix}tree-elbow-end-plus, + .#{$prefix}tree-elbow-end-minus{ + cursor: pointer; + } + + //elbows + .#{$prefix}tree-lines { + .#{$prefix}tree-elbow { + background-image: theme-image($theme-name, 'tree/elbow.gif'); + } + + .#{$prefix}tree-elbow-end { + background-image: theme-image($theme-name, 'tree/elbow-end.gif'); + } + + .#{$prefix}tree-elbow-plus { + background-image: theme-image($theme-name, 'tree/elbow-plus.gif'); + } + + .#{$prefix}tree-elbow-end-plus { + background-image: theme-image($theme-name, 'tree/elbow-end-plus.gif'); + } + + .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus { + background-image: theme-image($theme-name, 'tree/elbow-minus.gif'); + } + + .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus { + background-image: theme-image($theme-name, 'tree/elbow-end-minus.gif'); + } + + .#{$prefix}tree-elbow-line { + background-image: theme-image($theme-name, 'tree/elbow-line.gif'); + } + } + + .#{$prefix}tree-no-lines { + .#{$prefix}tree-elbow-plus, + .#{$prefix}tree-elbow-end-plus { + background-image: theme-image($theme-name, 'tree/elbow-plus-nl.gif'); + } + + .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-plus, + .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-elbow-end-plus { + background-image: theme-image($theme-name, 'tree/elbow-end-minus-nl.gif'); + } + } + + .#{$prefix}tree-arrows { + .#{$prefix}tree-elbow-plus, + .#{$prefix}tree-elbow-minus, + .#{$prefix}tree-elbow-end-plus, + .#{$prefix}tree-elbow-end-minus { + background-image: theme-image($theme-name, 'tree/arrows.gif'); + } + } + + .#{$prefix}tree-icon { + margin-right: 3px; + } + + .#{$prefix}tree-elbow, + .#{$prefix}tree-elbow-end, + .#{$prefix}tree-elbow-plus, + .#{$prefix}tree-elbow-end-plus, + .#{$prefix}tree-elbow-empty, + .#{$prefix}tree-elbow-line { + height: $tree-elbow-height; + width: $tree-elbow-width; + } + + .#{$prefix}tree-icon-leaf { + width: $tree-elbow-width; + background-image: theme-image($theme-name, 'tree/leaf.gif'); + } + + .#{$prefix}tree-icon-parent { + width: $tree-elbow-width; + background-image: theme-image($theme-name, 'tree/folder.gif'); + } + + .#{$prefix}grid-tree-node-expanded .#{$prefix}tree-icon-parent { + background-image: theme-image($theme-name, 'tree/folder-open.gif'); + } + + .#{$prefix}grid-rowbody { + padding: 0; + } + + .#{$prefix}tree-panel .#{$prefix}grid-cell-inner { + padding: 0px; + } + + .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell { + border: none; + } + + .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner { + height: $tree-elbow-height; + + line-height: $tree-elbow-height; + vertical-align: middle; + cursor: pointer; + + img { + float: left; + } + } + + .#{$prefix}ie { + .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner { + white-space: normal; + } + } + + + .#{$prefix}tree-checkbox { + float: left; + margin: 2px 3px 0 0; + display: block; + + width: $form-checkbox-size; + height: $form-checkbox-size; + background: theme-image($theme-name, $form-checkbox-image) no-repeat; + + overflow: hidden; + padding: 0; + border: 0; + &::-moz-focus-inner { + padding: 0; + border: 0; + } + } + @if $include-ie { + /* Hack for IE; causes alignment problem in IE9 standards mode so exclude that */ + .#{$prefix}nbr.#{$prefix}ie { + .#{$prefix}tree-checkbox { + font-size: 0; + } + } + } + .#{$prefix}tree-checkbox-checked { + background-position: 0 (0 - $form-checkbox-size); + } + + @if $include-ie { + .#{$prefix}tree-panel .#{$prefix}grid-cell-inner { + border-width: 0 !important; + } + } + + @if $include-ff { + .#{$prefix}gecko { + .#{$prefix}tree-panel .#{$prefix}grid-row .#{$prefix}grid-cell-inner { + line-height: $tree-elbow-height - 2; + } + } + } + + .#{$prefix}tree-drop-ok-append .#{$prefix}dd-drop-icon { + background-image: theme-image($theme-name, 'tree/drop-append.gif'); + } + + .#{$prefix}tree-drop-ok-above .#{$prefix}dd-drop-icon { + background-image: theme-image($theme-name, 'tree/drop-above.gif'); + } + + .#{$prefix}tree-drop-ok-below .#{$prefix}dd-drop-icon { + background-image: theme-image($theme-name, 'tree/drop-below.gif'); + } + + .#{$prefix}tree-drop-ok-between .#{$prefix}dd-drop-icon { + background-image: theme-image($theme-name, 'tree/drop-between.gif'); + } + + .#{$prefix}grid-tree-loading .#{$prefix}tree-icon { + background-image: theme-image($theme-name, 'tree/loading.gif'); + } + + .#{$prefix}tree-ddindicator { + height: 1px; + border-width: 1px 0px 0px; + border-style: dotted; + border-color: green; + } + + .#{$prefix}grid-tree-loading span { + font-style: italic; + color: #444444; + } + + .#{$prefix}tree-animator-wrap { + overflow: hidden; + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_viewport.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_viewport.scss new file mode 100644 index 000000000..5f1bf93f5 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_viewport.scss @@ -0,0 +1,9 @@ +@mixin extjs-viewport { + .#{$prefix}viewport, .#{$prefix}viewport body { + margin: 0; + padding: 0; + border: 0 none; + overflow: hidden; + height: 100%; + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_window.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_window.scss new file mode 100644 index 000000000..7479d6fee --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/_window.scss @@ -0,0 +1,179 @@ +@mixin extjs-window { + .#{$prefix}window { + outline: none; + + .#{$prefix}window-wrap { + position: relative; + + .#{$prefix}window-body { + overflow: hidden; + } + } + } + + .#{$prefix}window-body { + position: relative; + border-style: $window-body-border-style; + } + + //maximized window + .#{$prefix}window-maximized { + .#{$prefix}window-wrap { + .#{$prefix}window-header { + @include important-no-border-radius; + } + } + } + + // collapsed window header styles + .#{$prefix}window-collapsed { + .#{$prefix}window-header-vertical { + @include border-radius(5px); + } + .#{$prefix}window-header-horizontal { + @include border-radius(5px); + } + + // Padding changes for collapsed headers. + .#{$prefix}window-header-left { + padding-right: 5px !important; + } + + .#{$prefix}window-header-right { + padding-left: 5px !important; + } + + .#{$prefix}window-header-top { + padding-bottom: 5px !important; + } + + .#{$prefix}window-header-bottom { + padding-top: 5px !important; + } + } + + .#{$prefix}window-header-left, + .#{$prefix}window-header-right { + .#{$prefix}vml-base { + left: -3px !important; + } + } + + .#{$prefix}window-header-text { + @include no-select; + white-space: nowrap; + display: block; + } + + @include extjs-window-ui( + 'default', + + $ui-border-radius: $window-border-radius, + $ui-border-color: $window-border-color, + $ui-inner-border-color: $window-inner-border-color, + + $ui-header-color: $window-header-color, + + $ui-body-border-color: $window-body-border-color, + $ui-body-background-color: $window-body-background-color, + $ui-body-color: $window-body-color, + + $ui-background-color: $window-background-color + ); + + .#{$prefix}window-body-plain { + background: transparent; + } +} + +/** + * @class Ext.Window + * Used to create a visual theme for an Ext.Panel + */ +@mixin extjs-window-ui( + $ui-label, + + $ui-padding: null, + $ui-border-radius: null, + $ui-border-color: null, + $ui-inner-border-color: null, + + $ui-header-color: null, + $ui-header-font-size: $window-header-font-size, + $ui-header-font-weight: $window-header-font-weight, + + $ui-body-border-color: null, + $ui-body-background-color: null, + $ui-body-color: null, + + $ui-background-color: null +){ + $ui-header-text-height: round($ui-header-font-size * 1.46); // 11px / 16px + + .#{$prefix}window-#{$ui-label} { + @if $ui-border-color != null { border-color: $ui-border-color; } + @if $ui-border-radius != null { @include border-radius($ui-border-radius); } + + @if $ui-inner-border-color != null { @include inner-border($window-inner-border-width, $ui-inner-border-color); } + } + + @if $ui-border-radius != null { + @include x-frame( + 'window', + $ui-label, + + $border-radius: $ui-border-radius, + $border-width: $window-border-width, + $padding: $ui-padding, + $background-color: $ui-background-color + ); + } + + .#{$prefix}window-body-#{$ui-label} { + @if $ui-body-border-color !=null { + border-color: $ui-body-border-color; + border-width: $window-body-border-width; + } + + @if $ui-body-background-color != null { background: $ui-body-background-color; } + @if $ui-body-color != null { color: $ui-body-color; } + } + + .#{$prefix}window-header-#{$ui-label} { + @if $ui-border-color != null { border-color: $ui-border-color; } + zoom:1; + } + + .#{$prefix}window-header-text-#{$ui-label} { + @if $ui-header-color != null { color: $ui-header-color; } + @if $ui-header-font-weight != null { font-weight: $ui-header-font-weight; } + + line-height: $ui-header-text-height; + + font-family: $font-family; + font-size: $ui-header-font-size; + } + + @if $ui-border-radius != null { + @include x-frame('window-header', '#{$ui-label}-top', top($ui-border-radius) right($ui-border-radius) 0 0, $window-border-width, 5px 5px 0, $ui-background-color); + @include x-frame('window-header', '#{$ui-label}-right', 0 right($ui-border-radius) bottom($ui-border-radius) 0, $window-border-width, 5px 5px 5px 0, $ui-background-color); + @include x-frame('window-header', '#{$ui-label}-bottom', 0 0 bottom($ui-border-radius) left($ui-border-radius), $window-border-width, 0 5px 5px, $ui-background-color); + @include x-frame('window-header', '#{$ui-label}-left', top($ui-border-radius) 0 0 left($ui-border-radius), $window-border-width, 5px 0px 5px 5px, $ui-background-color); + } + + .#{$prefix}window-header-#{$ui-label}-top { + @include inner-border(1px 1px 0, $ui-inner-border-color); + } + + .#{$prefix}window-header-#{$ui-label}-right { + @include inner-border(1px 1px 1px 0, $ui-inner-border-color); + } + + .#{$prefix}window-header-#{$ui-label}-bottom { + @include inner-border(0px 1px 1px, $ui-inner-border-color); + } + + .#{$prefix}window-header-#{$ui-label}-left { + @include inner-border(1px 0 1px 1px, $ui-inner-border-color); + } +} diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_all.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_all.scss new file mode 100644 index 000000000..7c27892d9 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_all.scss @@ -0,0 +1,73 @@ +@mixin extjs-form { + /*misc*/ + .#{$prefix}webkit { + * { + &:focus { + outline:none !important; + } + } + } + + //form items + .#{$prefix}form-item { + display: block; + zoom: 1; + position: relative; + margin-bottom: 5px; + } + + .#{$prefix}form-item-label { + float: left; + padding: 3px 0 0; + z-index: 2; + position: relative; + font-size: $form-label-font-size; + @include no-select; + } + + .#{$prefix}form-item-label-top { + float: none; + clear: none; + padding: 0; + display: block; + } + + .#{$prefix}form-item-label-right { + float: left; + text-align: right; + } + + .#{$prefix}form-item-body { + position: relative; + float: left; + } + + .#{$prefix}form-invalid-under { + padding: 2px 2px 2px 18px; + clear: left; + + color: $form-error-msg-color; + font: $form-error-msg-font; + line-height: $form-error-msg-line-height; + + background: theme-image($theme-name, $form-exclamation-icon) no-repeat 0 2px; + } + + .#{$prefix}form-invalid-icon { + width: 18px; + height: 18px; + overflow: hidden; + text-indent: -9999px; + + position: absolute; + left: 0; + top: 0; + + background: theme-image($theme-name, $form-exclamation-icon) no-repeat 2px 3px; + + ul { + /* prevent inner elements from interfering with QuickTip hovering */ + display: none; + } + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_checkbox.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_checkbox.scss new file mode 100644 index 000000000..866184cce --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_checkbox.scss @@ -0,0 +1,64 @@ +@mixin extjs-form-checkboxfield { + .#{$prefix}form-cb-wrap { + padding-top: 3px; + } + + .#{$prefix}form-checkbox, + .#{$prefix}form-radio { + float: none; + vertical-align: -1px; + + width: $form-checkbox-size; + height: $form-checkbox-size; + background: theme-image($theme-name, $form-checkbox-image) no-repeat; + + overflow: hidden; + padding: 0; + border: 0; + &::-moz-focus-inner { + padding: 0; + border: 0; + } + } + @if $include-ie { + /* Hack for IE; causes alignment problem in IE9 standards mode so exclude that */ + .#{$prefix}nbr.#{$prefix}ie { + .#{$prefix}form-checkbox, + .#{$prefix}form-radio { + font-size: 0; + } + } + } + .#{$prefix}form-cb-checked { + .#{$prefix}form-checkbox, + .#{$prefix}form-radio { + background-position: 0 (0 - $form-checkbox-size); + } + } + + /* Focused */ + .#{$prefix}form-cb-focus { + background-position: (0 - $form-checkbox-size) 0; + } + .#{$prefix}form-cb-checked { + .#{$prefix}form-cb-focus { + background-position: (0 - $form-checkbox-size) (0 - $form-checkbox-size); + } + } + + /* Radios */ + .#{$prefix}form-radio { + background-image: theme-image($theme-name, $form-radio-image); + } + + /* boxLabel */ + .#{$prefix}form-cb-label-before { + margin-right: 4px; + } + .#{$prefix}form-cb-label-after { + margin-left: 4px; + } + + + +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_checkboxgroup.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_checkboxgroup.scss new file mode 100644 index 000000000..59c2f8deb --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_checkboxgroup.scss @@ -0,0 +1,30 @@ +@mixin extjs-form-checkboxgroup { + + .#{$prefix}form-checkboxgroup-body { + padding: 3px 4px; + } + + .#{$prefix}form-invalid { + .#{$prefix}form-checkboxgroup-body { + border: 1px solid #c30; + background: #fff theme-image($theme-name, 'grid/invalid_line.gif') repeat-x bottom; + padding: 2px 3px; + } + } + + .#{$prefix}check-group-alt { + background: adjust-color($base-color, $hue: 2.667deg, $saturation: -7.168%, $lightness: 3.725%); + + border-top:1px dotted adjust-color($base-color, $hue: 17.193deg, $saturation: -40.827%, $lightness: -9.412%); + border-bottom:1px dotted adjust-color($base-color, $hue: 17.193deg, $saturation: -40.827%, $lightness: -9.412%); + } + + .#{$prefix}form-check-group-label { + color: #333; + + border-bottom: 1px solid #333; + + margin: 0 30px 5px 0; + padding: 2px; + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_field.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_field.scss new file mode 100644 index 000000000..533829c32 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_field.scss @@ -0,0 +1,125 @@ +@mixin extjs-form-field { + .#{$prefix}form-field, + .#{$prefix}form-display-field { + float: left; + + margin: 0 0 0 0; + + font: $form-field-font; + color: $form-field-color; + } + + .#{$prefix}form-text, + textarea.#{$prefix}form-field { + padding: $form-field-padding; + + background: repeat-x 0 0; + border: $form-field-border-width solid; + + background-color: $form-field-background-color; + @if $form-field-background-image { + background-image: theme-image($theme-name, $form-field-background-image); + } + + border-color: $form-field-border-color; + } + + $form-field-content-height: $form-field-height - top($form-field-padding) - top($form-field-border-width) - bottom($form-field-padding) - bottom($form-field-border-width); + + .#{$prefix}form-text { + height: $form-field-content-height; + line-height: $form-field-content-height; + vertical-align: middle; + } + + .#{$prefix}ie6, + .#{$prefix}ie7, + .#{$prefix}ie8 { + .#{$prefix}form-text { + line-height: $form-field-content-height - 3px; + } + } + + .#{$prefix}border-box .#{$prefix}form-text { + height: $form-field-height; + } + + textarea.#{$prefix}form-field { + color: $form-field-color; + overflow: auto; + height: auto; + line-height: normal; + background: repeat-x 0 0; + background-color: $form-field-background-color; + @if $form-field-background-image { + background-image: theme-image($theme-name, $form-field-background-image); + } + resize: none; //Disable browser resizable textarea + } + + .#{$prefix}border-box textarea.#{$prefix}form-field { + height: auto; + } + + @if $include-safari { + .#{$prefix}safari.#{$prefix}mac textarea.#{$prefix}form-field { + margin-bottom: -2px; // another bogus margin bug, safari/mac only + } + } + + .#{$prefix}form-focus, + textarea.#{$prefix}form-focus { + border-color: $form-field-focus-border-color; + } + + .#{$prefix}form-invalid-field, + textarea.#{$prefix}form-invalid-field { + background-color: $form-field-invalid-background-color; + @if $form-field-invalid-background-image { + background-image: theme-image($theme-name, $form-field-invalid-background-image); + background-repeat: $form-field-invalid-background-repeat; + background-position: $form-field-invalid-background-position; + } + border-color: $form-field-invalid-border-color; + } + + .#{$prefix}form-item { + font: $form-label-font; + } + + .#{$prefix}form-empty-field, textarea.#{$prefix}form-empty-field { + color: $form-field-empty-color; + } + + .#{$prefix}webkit { + .#{$prefix}form-empty-field { + line-height: 15px; + } + } + + .#{$prefix}form-display-field { + padding-top: 3px; + } + + @if $include-ie { + .#{$prefix}ie .#{$prefix}form-file { + height: $form-field-height + 1; + + line-height: 18px; + + vertical-align: middle; + } + } + + .#{$prefix}field-default-toolbar .#{$prefix}form-text { + height: $form-toolbar-field-height - vertical($form-field-padding) - vertical($form-field-border-width); + } + + .#{$prefix}border-box .#{$prefix}field-default-toolbar .#{$prefix}form-text { + height: $form-toolbar-field-height; + } + + .#{$prefix}field-default-toolbar .#{$prefix}form-item-label-left { + padding-left: 4px; + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_fieldset.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_fieldset.scss new file mode 100644 index 000000000..86cc6c818 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_fieldset.scss @@ -0,0 +1,113 @@ +@mixin extjs-form-fieldset { + .#{$prefix}fieldset { + border: $fieldset-border; + + padding: $fieldset-padding; + margin-bottom: $fieldset-padding; + + display: block; /* preserve margins in IE */ + } + + .#{$prefix}ie .#{$prefix}fieldset { + padding-top: 0; + padding-bottom: $fieldset-padding; + } + + .#{$prefix}fieldset-header { + font: $fieldset-header-font; + color: $fieldset-header-color; + padding: $fieldset-header-padding; + line-height: 16px; + + .#{$prefix}fieldset-header-text { + float: left; + } + + .#{$prefix}form-item, + .#{$prefix}tool { + float: left; + margin: 0 3px 0 0; + } + + .#{$prefix}form-cb-wrap { + padding: 0; + } + } + + .#{$prefix}webkit .#{$prefix}fieldset-header { + padding-top: 1px; + } + + @if $include-ie { + .#{$prefix}quirks .#{$prefix}ie .#{$prefix}fieldset-header, + .#{$prefix}ie6 .#{$prefix}fieldset-header, + .#{$prefix}ie7 .#{$prefix}fieldset-header, + .#{$prefix}ie8 .#{$prefix}fieldset-header { + padding: 0; + } + + .#{$prefix}ie .#{$prefix}fieldset-header { + margin-bottom: 10px; + } + + .#{$prefix}ie9 .#{$prefix}fieldset-header { + padding-top: 1px; + } + } + + .#{$prefix}fieldset-collapsed { + .#{$prefix}fieldset-body { + display: none; + } + } + + .#{$prefix}fieldset-collapsed { + padding-bottom: 0 !important; + + border-width: 1px 1px 0 1px !important; + border-left-color: transparent !important; + border-right-color: transparent !important; + } + + @if $include-ie { + .#{$prefix}ie6 .#{$prefix}fieldset-collapsed { + border-width: 1px 0 0 0 !important; + + padding-bottom: 0 !important; + margin-left: 1px; + margin-right: 1px; + } + + .#{$prefix}ie .#{$prefix}fieldset-bwrap { + zoom: 1; + } + } + + @if $include-ie { + /* IE legend positioning bug */ + .#{$prefix}ie .#{$prefix}fieldset-noborder legend { + position: relative; + + margin-bottom: 23px; + } + + .#{$prefix}ie .#{$prefix}fieldset-noborder legend span { + position: absolute; + left: 16px; + } + } + + .#{$prefix}fieldset { + overflow: hidden; + } + + .#{$prefix}fieldset-bwrap { + overflow: hidden; + + zoom: 1; + } + + .#{$prefix}fieldset-body { + overflow: hidden; + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_file.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_file.scss new file mode 100644 index 000000000..3f83ea20c --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_file.scss @@ -0,0 +1,32 @@ +@mixin extjs-form-file { + + .#{$prefix}form-file-wrap { + .#{$prefix}form-text { + color: #777; + } + + .#{$prefix}form-file-btn { + overflow: hidden; + float: left; + } + + .#{$prefix}form-file-input { + position: absolute; + top: -4px; + right: -2px; + height: $form-field-height + 8; + @include opacity(0); + + /* Yes, there's actually a good reason for this... + * If the configured buttonText is set to something longer than the default, + * then it will quickly exceed the width of the hidden file input's "Browse..." + * button, so part of the custom button's clickable area will be covered by + * the hidden file input's text box instead. This results in a text-selection + * mouse cursor over that part of the button, at least in Firefox, which is + * confusing to a user. Giving the hidden file input a huge font-size makes + * the native button part very large so it will cover the whole clickable area. + */ + font-size: 100px; + } + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_htmleditor.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_htmleditor.scss new file mode 100644 index 000000000..633fdf992 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_htmleditor.scss @@ -0,0 +1,123 @@ +@mixin extjs-form-htmleditor { + .#{$prefix}html-editor-wrap { + border: 1px solid $html-editor-border-color; + + .#{$prefix}toolbar { + border-top-width: 0; + border-left-width: 0; + border-right-width: 0; + } + + textarea { + background-color: $html-editor-background-color; + } + } + + .#{$prefix}html-editor-tb .#{$prefix}btn-text { + background:transparent theme-image($theme-name, 'editor/tb-sprite.gif') no-repeat; + } + + .#{$prefix}html-editor-tb .#{$prefix}edit-bold, + .#{$prefix}menu-item img.#{$prefix}edit-bold { + background-position:0 0; + background-image: theme-image($theme-name, 'editor/tb-sprite.gif'); + } + + .#{$prefix}html-editor-tb .#{$prefix}edit-italic, + .#{$prefix}menu-item img.#{$prefix}edit-italic { + background-position:-16px 0; + background-image: theme-image($theme-name, 'editor/tb-sprite.gif'); + } + + .#{$prefix}html-editor-tb .#{$prefix}edit-underline, + .#{$prefix}menu-item img.#{$prefix}edit-underline { + background-position:-32px 0; + background-image: theme-image($theme-name, 'editor/tb-sprite.gif'); + } + + .#{$prefix}html-editor-tb .#{$prefix}edit-forecolor, + .#{$prefix}menu-item img.#{$prefix}edit-forecolor { + background-position:-160px 0; + background-image: theme-image($theme-name, 'editor/tb-sprite.gif'); + } + + .#{$prefix}html-editor-tb .#{$prefix}edit-backcolor, + .#{$prefix}menu-item img.#{$prefix}edit-backcolor { + background-position:-176px 0; + background-image: theme-image($theme-name, 'editor/tb-sprite.gif'); + } + + .#{$prefix}html-editor-tb .#{$prefix}edit-justifyleft, + .#{$prefix}menu-item img.#{$prefix}edit-justifyleft { + background-position:-112px 0; + background-image: theme-image($theme-name, 'editor/tb-sprite.gif'); + } + + .#{$prefix}html-editor-tb .#{$prefix}edit-justifycenter, + .#{$prefix}menu-item img.#{$prefix}edit-justifycenter { + background-position:-128px 0; + background-image: theme-image($theme-name, 'editor/tb-sprite.gif'); + } + + .#{$prefix}html-editor-tb .#{$prefix}edit-justifyright, + .#{$prefix}menu-item img.#{$prefix}edit-justifyright { + background-position:-144px 0; + background-image: theme-image($theme-name, 'editor/tb-sprite.gif'); + } + + .#{$prefix}html-editor-tb .#{$prefix}edit-insertorderedlist, + .#{$prefix}menu-item img.#{$prefix}edit-insertorderedlist { + background-position:-80px 0; + background-image: theme-image($theme-name, 'editor/tb-sprite.gif'); + } + + .#{$prefix}html-editor-tb .#{$prefix}edit-insertunorderedlist, + .#{$prefix}menu-item img.#{$prefix}edit-insertunorderedlist { + background-position:-96px 0; + background-image: theme-image($theme-name, 'editor/tb-sprite.gif'); + } + + .#{$prefix}html-editor-tb .#{$prefix}edit-increasefontsize, + .#{$prefix}menu-item img.#{$prefix}edit-increasefontsize { + background-position:-48px 0; + background-image: theme-image($theme-name, 'editor/tb-sprite.gif'); + } + + .#{$prefix}html-editor-tb .#{$prefix}edit-decreasefontsize, + .#{$prefix}menu-item img.#{$prefix}edit-decreasefontsize { + background-position:-64px 0; + background-image: theme-image($theme-name, 'editor/tb-sprite.gif'); + } + + .#{$prefix}html-editor-tb .#{$prefix}edit-sourceedit, + .#{$prefix}menu-item img.#{$prefix}edit-sourceedit { + background-position:-192px 0; + background-image: theme-image($theme-name, 'editor/tb-sprite.gif'); + } + + .#{$prefix}html-editor-tb .#{$prefix}edit-createlink, + .#{$prefix}menu-item img.#{$prefix}edit-createlink { + background-position: -208px 0; + background-image: theme-image($theme-name, 'editor/tb-sprite.gif'); + } + + .#{$prefix}html-editor-tip .#{$prefix}tip-bd .#{$prefix}tip-bd-inner { + padding: 5px; + padding-bottom: 1px; + } + + .#{$prefix}html-editor-tb { + .#{$prefix}toolbar { + position: static !important; + } + .#{$prefix}font-select { + font-size: 11px; + } + } + + .x-html-editor-wrap textarea { + border: 0; + padding: 3px 2px; + overflow: auto; + } +}
\ No newline at end of file diff --git a/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_triggerfield.scss b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_triggerfield.scss new file mode 100644 index 000000000..aa85d56d8 --- /dev/null +++ b/deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets/form/_triggerfield.scss @@ -0,0 +1,162 @@ +@mixin extjs-form-triggerfield { + .#{$prefix}form-trigger-wrap { + float: left; + } + + .#{$prefix}form-trigger { + background-image: theme-image($theme-name, 'form/trigger.gif'); + background-position: 0 0; + + width: $form-trigger-width; + height: $form-trigger-height - $form-trigger-border-bottom-width; + float: left; + + border-bottom: $form-trigger-border-bottom; + + cursor: pointer; + cursor: hand; + } + + .#{$prefix}border-box .#{$prefix}form-trigger { + height: $form-trigger-height; + } + + .#{$prefix}field-default-toolbar .#{$prefix}form-trigger { + height: $form-toolbar-trigger-height - $form-trigger-border-bottom-width; + } + + .#{$prefix}border-box .#{$prefix}field-default-toolbar .#{$prefix}form-trigger { + height: $form-toolbar-trigger-height; + } + + + .#{$prefix}form-trigger-over { + background-position: -$form-trigger-width 0; + + border-bottom-color: $form-trigger-border-bottom-color-over; + } + + .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger { + background-position: -($form-trigger-width * 3) 0; + + border-bottom-color: $form-trigger-border-bottom-color-focus; + } + + .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger-over { + background-position: -($form-trigger-width * 4) 0; + + @if $form-trigger-border-bottom-color-focus-over { + border-bottom-color: $form-trigger-border-bottom-color-focus-over; + } + } + + .#{$prefix}form-trigger-click, + .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-trigger-click { + background-position: -($form-trigger-width * 2) 0; + + @if $form-trigger-border-bottom-color-pressed { + border-bottom-color: $form-trigger-border-bottom-color-pressed; + } + } + + .#{$prefix}form-trigger-icon { + height: $form-trigger-width - $form-trigger-border-bottom-width; + + background-repeat: no-repeat; + background-position: $form-trigger-icon-background-position; + } + + .#{$prefix}pickerfield-open { + .#{$prefix}form-field { + @include border-bottom-radius(0); + } + } + + .#{$prefix}pickerfield-open-above { + .#{$prefix}form-field { + @include border-bottom-left-radius(3px); + @include border-top-radius(0); + } + } + + .#{$prefix}form-arrow-trigger { + .#{$prefix}form-trigger-icon { + background-image: theme-image($theme-name, 'boundlist/trigger-arrow.png'); + } + } + + .#{$prefix}form-date-trigger { + background-image: theme-image($theme-name, 'form/date-trigger.gif'); + } + + $spinner-btn-height: $form-trigger-height / 2; + .#{$prefix}form-trigger-wrap { + .#{$prefix}form-spinner-up, + .#{$prefix}form-spinner-down { + background-image: theme-image($theme-name, 'form/spinner.gif'); + + width: $form-trigger-width; + height: $spinner-btn-height; + + font-size: 0; /*for IE*/ + + border-bottom: 0; + } + .#{$prefix}form-spinner-down { + background-position: 0 (-$spinner-btn-height); + } + } + .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down { + background-position: -($form-trigger-width * 3) (-$spinner-btn-height); + } + .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-over { + background-position: (-$form-trigger-width) (-$spinner-btn-height); + } + .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down-over { + background-position: -($form-trigger-width * 4) (-$spinner-btn-height); + } + .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-click { + background-position: -($form-trigger-width * 2) (-$spinner-btn-height); + } + + + .#{$prefix}field-default-toolbar { + $spinner-btn-height: $form-toolbar-trigger-height / 2; + .#{$prefix}form-trigger-wrap { + .#{$prefix}form-spinner-up, + .#{$prefix}form-spinner-down { + background-image: theme-image($theme-name, 'form/spinner-small.gif'); + height: $spinner-btn-height; + } + .#{$prefix}form-spinner-down { + background-position: 0 (-$spinner-btn-height); + } + } + .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down { + background-position: -($form-trigger-width * 3) (-$spinner-btn-height); + } + .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-over { + background-position: (-$form-trigger-width) (-$spinner-btn-height); + } + .#{$prefix}form-trigger-wrap-focus .#{$prefix}form-spinner-down-over { + background-position: -($form-trigger-width * 4) (-$spinner-btn-height); + } + .#{$prefix}form-trigger-wrap .#{$prefix}form-spinner-down-click { + background-position: -($form-trigger-width * 2) (-$spinner-btn-height); + } + } + + + .#{$prefix}trigger-noedit { + cursor: pointer; + cursor: hand; + } + + + .#{$prefix}form-clear-trigger { + background-image: theme-image($theme-name, 'form/clear-trigger.gif'); + } + .#{$prefix}form-search-trigger { + background-image: theme-image($theme-name, 'form/search-trigger.gif'); + } +} diff --git a/deluge/ui/web/resources/themes/templates/resources/css/my-ext-theme.css b/deluge/ui/web/resources/themes/templates/resources/css/my-ext-theme.css new file mode 100644 index 000000000..907bb562d --- /dev/null +++ b/deluge/ui/web/resources/themes/templates/resources/css/my-ext-theme.css @@ -0,0 +1,59 @@ +/* +Syntax error: File to import not found or unreadable: ext4/default/all. + Load paths: + /Users/Robert/github/sencha/sdk/extjs/resources/themes/templates/resources/sass + /Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/frameworks/blueprint/stylesheets + /Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/frameworks/compass/stylesheets + + on line 8 of /Users/Robert/github/sencha/sdk/extjs/resources/themes/templates/resources/sass/my-ext-theme.scss + +Backtrace: +/Users/Robert/github/sencha/sdk/extjs/resources/themes/templates/resources/sass/my-ext-theme.scss:8 +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/import_node.rb:64:in `import' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/import_node.rb:25:in `imported_file' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:148:in `visit_import' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/base.rb:37:in `send' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/base.rb:37:in `visit' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:18:in `visit' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/base.rb:53:in `visit_children' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/base.rb:53:in `map' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/base.rb:53:in `visit_children' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:27:in `visit_children' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:39:in `with_environment' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:26:in `visit_children' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/base.rb:37:in `visit' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:47:in `visit_root' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/base.rb:37:in `send' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/base.rb:37:in `visit' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:18:in `visit' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:7:in `send' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/visitors/perform.rb:7:in `visit' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/tree/root_node.rb:20:in `render' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/engine.rb:291:in `_render' +/Library/Ruby/Gems/1.8/gems/sass-3.1.0.alpha.252/lib/sass/../sass/engine.rb:238:in `render' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:127:in `compile' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:113:in `timed' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:126:in `compile' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/logger.rb:45:in `red' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:125:in `compile' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:105:in `compile_if_required' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:92:in `run' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:90:in `each' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:90:in `run' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:113:in `timed' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/compiler.rb:89:in `run' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/commands/update_project.rb:36:in `perform' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/commands/base.rb:18:in `execute' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/commands/project_base.rb:19:in `execute' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/exec/sub_command_ui.rb:43:in `perform!' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/lib/compass/exec/sub_command_ui.rb:15:in `run!' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/bin/compass:25 +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/bin/compass:39:in `call' +/Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/bin/compass:39 +/usr/bin/compass:19:in `load' +/usr/bin/compass:19 +*/ +body:before { + white-space: pre; + font-family: monospace; + content: "Syntax error: File to import not found or unreadable: ext4/default/all.\A Load paths:\A /Users/Robert/github/sencha/sdk/extjs/resources/themes/templates/resources/sass\A /Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/frameworks/blueprint/stylesheets\A /Library/Ruby/Gems/1.8/gems/compass-0.11.beta.5/frameworks/compass/stylesheets\A \A on line 8 of /Users/Robert/github/sencha/sdk/extjs/resources/themes/templates/resources/sass/my-ext-theme.scss"; } diff --git a/deluge/ui/web/resources/themes/templates/resources/sass/config.rb b/deluge/ui/web/resources/themes/templates/resources/sass/config.rb new file mode 100644 index 000000000..87ed40a1d --- /dev/null +++ b/deluge/ui/web/resources/themes/templates/resources/sass/config.rb @@ -0,0 +1,22 @@ +# $ext_path: This should be the path of where the ExtJS SDK is installed +# Generally this will be in a lib/extjs folder in your applications root +# <root>/lib/extjs +$ext_path = "../../lib/extjs" + +# sass_path: the directory your Sass files are in. THIS file should also be in the Sass folder +# Generally this will be in a resources/sass folder +# <root>/resources/sass +sass_path = File.dirname(__FILE__) + +# css_path: the directory you want your CSS files to be. +# Generally this is a folder in the parent directory of your Sass files +# <root>/resources/css +css_path = File.join(sass_path, "..", "css") + +# output_style: The output style for your compiled CSS +# nested, expanded, compact, compressed +# More information can be found here http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style +output_style = :compressed + +# We need to load in the Ext4 themes folder, which includes all it's default styling, images, variables and mixins +load File.join(File.dirname(__FILE__), $ext_path, 'resources', 'themes') diff --git a/deluge/ui/web/resources/themes/templates/resources/sass/my-ext-theme.scss b/deluge/ui/web/resources/themes/templates/resources/sass/my-ext-theme.scss new file mode 100644 index 000000000..b5d2c18f2 --- /dev/null +++ b/deluge/ui/web/resources/themes/templates/resources/sass/my-ext-theme.scss @@ -0,0 +1,44 @@ +// Unless you want to include all components, you must set $include-default to false +// IF you set this to true, you can also remove lines 10 to 38 of this file +$include-default: false; + +// Insert your custom variables here. +// $base-color: #aa0000; + +@import 'ext4/default/all'; + +// You may remove any of the following modules that you +// do not use in order to create a smaller css file. +@include extjs-boundlist; +@include extjs-button; +@include extjs-btn-group; +@include extjs-datepicker; +@include extjs-colorpicker; +@include extjs-menu; +@include extjs-grid; +@include extjs-form; + @include extjs-form-field; + @include extjs-form-fieldset; + @include extjs-form-checkboxfield; + @include extjs-form-checkboxgroup; + @include extjs-form-triggerfield; + @include extjs-form-htmleditor; +@include extjs-panel; +@include extjs-qtip; +@include extjs-slider; +@include extjs-progress; +@include extjs-toolbar; +@include extjs-window; +@include extjs-messagebox; +@include extjs-tabbar; +@include extjs-tab; +@include extjs-tree; +@include extjs-drawcomponent; +@include extjs-viewport; + +// This line changes the location of your images when creating UIs to be relative instead of within the ExtJS directory. +// You MUST set this to true/string value if you are creating new UIs + supporting legacy browsers. +// This only applies to new UIs. It does not apply to default component images (i.e. when changing $base-color) +// The value can either be true, in which case the image path will be "../images/" +// or a string, of where the path is +$relative-image-path-for-uis: true; // defaults to "../images/" when true
\ No newline at end of file |