109 lines
3.1 KiB
SCSS
109 lines
3.1 KiB
SCSS
@mixin common-settings-panel {
|
|
.x-panel.x-panel-settings {
|
|
@include background-gradient($base-color, color_stops(lighten($base-color, 13%), $base-color));
|
|
@include box-shadow(lighten($base-color, 100%) 0 1px 0 inset, rgba(0, 0, 0, .3) 0 .2em .6em);
|
|
border: 1px solid darken($base-color, 32%);
|
|
|
|
.x-anchor-top {
|
|
$anchor-height: .7em;
|
|
$anchor-width: $anchor-height * 2.33;
|
|
|
|
background-color: darken($base-color, 32%);
|
|
margin-top: -$anchor-height + 0.02em + 0.06em;
|
|
@include box-shadow(lighten($base-color, 100%) 0 -1px 0 0 inset);
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: $anchor-width;
|
|
height: $anchor-height;
|
|
-webkit-mask: 0 0 theme_image($theme-name, "tip_top.png") no-repeat;
|
|
-webkit-mask-size: $anchor-width $anchor-height;
|
|
@include background-gradient($base-color, color_stops(lighten($base-color, 15%), lighten($base-color, 13%)));
|
|
top: 1px !important;
|
|
}
|
|
}
|
|
|
|
.x-anchor-bottom {
|
|
$anchor-height: .7em;
|
|
$anchor-width: $anchor-height * 2.33;
|
|
|
|
height: $anchor-height + .1em;
|
|
background-color: darken($base-color, 32%);
|
|
margin-top: -0.15em;
|
|
@include box-shadow(lighten($base-color, 100%) 0 -1px 0 0 inset);
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: $anchor-width;
|
|
height: $anchor-height + .1em;
|
|
-webkit-mask: 0 0 theme_image($theme-name, "tip_bottom.png") no-repeat;
|
|
-webkit-mask-size: $anchor-width $anchor-height;
|
|
@include background-gradient($base-color, color_stops($base-color, darken($base-color, 5%)));
|
|
top: -1px !important;
|
|
}
|
|
}
|
|
|
|
.x-panel-inner {
|
|
background: transparent;
|
|
}
|
|
|
|
.x-navigation-bar {
|
|
border-bottom: none;
|
|
margin-top: -6px;
|
|
background: transparent;
|
|
overflow: hidden;
|
|
|
|
.x-title {
|
|
color: darken($base-color, 60%);
|
|
text-shadow: lighten($base-color, 50%) 0 .08em 0;
|
|
}
|
|
}
|
|
|
|
|
|
.x-navigationview.plain {
|
|
.x-navigationview-inner {
|
|
background: transparent;
|
|
@include border-radius(0);
|
|
&:after {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.x-navigationview-inner {
|
|
background-color: lighten($base-color, 14%);
|
|
@include border-radius($panel-border-radius);
|
|
&:after {
|
|
@include insertion(100%, 100%);
|
|
pointer-events: none;
|
|
@include border-radius($panel-border-radius);
|
|
@include single-box-shadow(darken($base-color, 1%), 0, 1px, 2px, 2px, inset);
|
|
border: 1px solid darken($base-color, 32%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.x-label.info .x-innerhtml {
|
|
color: darken($base-color, 30%);
|
|
text-shadow: 0 1px 0 lighten($base-color, 50%);
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-input-image input[type="file"] {
|
|
opacity: 0;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
// custom mask
|
|
.x-mask.transparent {
|
|
background: transparent;
|
|
}
|
|
|
|
.round {
|
|
@include border-radius($panel-border-radius);
|
|
}
|
|
} |