Deluge
diff options
Diffstat (limited to 'deluge/ui/web/resources/themes/stylesheets/ext4/default/widgets')
29 files changed, 5653 insertions, 0 deletions
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'); + } +} |