298 lines
9.5 KiB
CSS
298 lines
9.5 KiB
CSS
@import url("../default/windows.css");
|
|
|
|
|
|
.JSW {
|
|
--active-high-color : rgba(153, 153, 153, 0.7); /* Obere Farbe der aktiven Fensterleiste */
|
|
--high-color : rgba(26, 153, 26, 1); /* Obere Farbe der Fensterleiste */
|
|
--active-low-color : rgba(14, 154, 14, 1); /* Untere Farbe der aktiven Fensterleiste und Farbe der aktiven Raender */
|
|
--low-color : rgba(153, 153, 153, 1); /* Untere Farbe der Fensterleise und Farbe der Raender */
|
|
--bg-color : rgba(252, 255, 250, 1); /* Hintergrundfarbe der Fenster */
|
|
--title-color : rgba(200, 200, 200, 1); /* Farbe des Fenstertitels */
|
|
--active-title-color : rgba(255, 255, 255, 1); /* Farbe des Fenstertitels */
|
|
--button-color : rgba(200, 200, 200, 1); /* Farbe der Fensterbuttons */
|
|
--button-hover-color : rgba(255, 255, 255, 1); /* Farbe der mit Maus ueberfahrenen Fensterbuttons */
|
|
--button-active-color : rgba(200, 200, 200, 1); /* Farbe der angeklickten Fensterbuttons */
|
|
--disabled-color : rgba(200, 240, 200, 0.3); /* Farbe des deaktiviert-Schleiers */
|
|
}
|
|
|
|
|
|
.JSW.OuterBox {
|
|
background-color : transparent;
|
|
}
|
|
.JSW.OuterBox.active {
|
|
background-color : transparent;
|
|
}
|
|
|
|
.JSW.InnerBox { /* Hier nur ein Class-Attribut verwenden, damit Eigenschaften leichter von anderen Stylesheets ueberschrieben werden koennen. */
|
|
background-color : rgba(252, 255, 250, 1); background-color : var(--bg-color);
|
|
}
|
|
|
|
|
|
|
|
|
|
.JSW.Disabled {
|
|
background-color : rgba(200, 220, 200, 0.3); background-color : var(--disabled-color);
|
|
border-radius : 5px;
|
|
}
|
|
|
|
.JSW.Bar {
|
|
background : #1A991A;
|
|
background : linear-gradient(to bottom, #1A991A 5px, #999 15px);
|
|
background : linear-gradient(to bottom, var(--high-color) 5px, var(--low-color) 15px);
|
|
}
|
|
.JSW.active .Bar {
|
|
background : #0E9A0E;
|
|
background : linear-gradient(to bottom, rgba(153, 153, 153, 0.7) 0px, #0E9A0E 20px);
|
|
background : linear-gradient(to bottom, var(--active-high-color) 0px, var(--active-low-color) 20px);
|
|
}
|
|
|
|
.JSW .JSW.Icon {
|
|
margin-right : 4px;
|
|
}
|
|
|
|
.JSW.OuterBox .JSW.Title {
|
|
color : #C8C8C8;
|
|
color : var(--title-color);
|
|
font-size : 12px;
|
|
font-family : Arial;
|
|
font-weight : bold;
|
|
margin : 0px;
|
|
vertical-align : top;
|
|
}
|
|
.JSW.active .JSW.Title { color : #FFF; color : var(--active-title-color); }
|
|
|
|
|
|
|
|
/* The Button-Icons are inspired from http://css-tricks.com/examples/ShapesOfCSS/ */
|
|
|
|
.JSW.Buttons a {
|
|
background-color : transparent;
|
|
}
|
|
|
|
.JSW.ButtonExclude:before {
|
|
content : '';
|
|
position : relative;
|
|
top : 4px;
|
|
left : -2px;
|
|
display : block;
|
|
width: 0px;
|
|
height: 0px;
|
|
border-bottom: 6px solid transparent;
|
|
border-left: 6px solid transparent;
|
|
border-right : 6px solid #C8C8C8;
|
|
border-right : 6px solid var(--button-color);
|
|
box-shadow : 10px -5px 0px -2px #C8C8C8;
|
|
box-shadow : 10px -5px 0px -2px var(--button-color);
|
|
}
|
|
.JSW.ButtonExclude:after {
|
|
content : '';
|
|
position : relative;
|
|
top : 0px;
|
|
left : 3.5px;
|
|
display : block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border: 0 solid transparent;
|
|
border-top: 3px solid #C8C8C8;
|
|
border-top: 3px solid var(--button-color);
|
|
border-radius: 11px 0 0 0;
|
|
transform:rotate(-45deg);
|
|
}
|
|
.JSW.ButtonExclude:hover:before {
|
|
border-right : 6px solid #FFF;
|
|
border-right : 6px solid var(--button-hover-color);
|
|
box-shadow : 10px -5px 0px -2px #FFF;
|
|
box-shadow : 10px -5px 0px -2px var(--button-hover-color);
|
|
}
|
|
.JSW.ButtonExclude:hover:after {
|
|
border-top: 3px solid #FFF;
|
|
border-top: 3px solid var(--button-hover-color);
|
|
}
|
|
.JSW.ButtonExclude:active:before {
|
|
border-right : 6px solid #C8C8C8;
|
|
border-right : 6px solid var(--button-active-color);
|
|
box-shadow : 10px -5px 0px -2px #C8C8C8;
|
|
box-shadow : 10px -5px 0px -2px var(--button-active-color);
|
|
}
|
|
.JSW.ButtonExclude:active:after {
|
|
border-top: 3px solid #C8C8C8;
|
|
border-top: 3px solid var(--button-active-color);
|
|
}
|
|
.JSW.Buttons.nonexcludable .ButtonExclude { display : none; }
|
|
|
|
|
|
.JSW.ButtonMinimize:before {
|
|
content : '';
|
|
position : relative;
|
|
top : 12px;
|
|
left : 2px;
|
|
display : block;
|
|
width: 10px;
|
|
height: 2px;
|
|
background-color : #C8C8C8;
|
|
background-color : var(--button-color);
|
|
}
|
|
.JSW.ButtonMinimize:hover:before { background-color : #FFF; background-color : var(--button-hover-color); }
|
|
.JSW.ButtonMinimize:active:before { background-color : #C8C8C8; background-color : var(--button-active-color); }
|
|
.JSW.Buttons.nonminimizable .ButtonMinimize { display : none; }
|
|
|
|
|
|
.JSW.ButtonMaximize:before {
|
|
content : '';
|
|
position : relative;
|
|
top : 2px;
|
|
left : 2px;
|
|
display : block;
|
|
width: 12px;
|
|
height: 11px;
|
|
border-style : solid;
|
|
border-left-width : 1px;
|
|
border-right-width : 1px;
|
|
border-bottom-width : 1px;
|
|
border-top-width : 2px;
|
|
border-color : #C8C8C8;
|
|
border-color : var(--button-color);
|
|
}
|
|
.JSW.maximized .ButtonMaximize:before {
|
|
top : 5px;
|
|
left : 2px;
|
|
display : block;
|
|
width : 10px;
|
|
height : 8px;
|
|
}
|
|
.JSW.maximized .ButtonMaximize:after {
|
|
content : '';
|
|
position : relative;
|
|
top : -8px;
|
|
left : 4px;
|
|
display : block;
|
|
width : 10px;
|
|
height : 8px;
|
|
border-style : solid;
|
|
border-left-width : 0px;
|
|
border-right-width : 1px;
|
|
border-bottom-width : 0px;
|
|
border-top-width : 2px;
|
|
border-color : #C8C8C8;
|
|
border-color : var(--button-color);
|
|
}
|
|
.JSW.ButtonMaximize:hover:before, .JSW.ButtonMaximize:hover:after { border-color : #FFF; border-color : var(--button-hover-color); }
|
|
.JSW.ButtonMaximize:active:before, .JSW.ButtonMaximize:active:after { border-color : #C8C8C8; border-color : var(--button-active-color); }
|
|
.JSW.Buttons.nonmaximizable .ButtonMaximize { display : none; }
|
|
|
|
|
|
.JSW.ButtonClose:before, .JSW.ButtonClose:after {
|
|
content : '';
|
|
position : relative;
|
|
top : 8px;
|
|
left : 2px;
|
|
display : block;
|
|
width : 16px;
|
|
height : 2px;
|
|
margin-bottom : -2px;
|
|
background-color : #C8C8C8;
|
|
background-color : var(--button-color);
|
|
transform : rotate(45deg);
|
|
}
|
|
.JSW.ButtonClose:after {
|
|
transform : rotate(-45deg);
|
|
}
|
|
.JSW.ButtonClose:hover:before, .JSW.ButtonClose:hover:after { background-color : #FFF; background-color : var(--button-hover-color); }
|
|
.JSW.ButtonClose:active:before, .JSW.ButtonClose:active:after { background-color : #C8C8C8; background-color : var(--button-active-color); }
|
|
.JSW.Buttons.nonclosable .ButtonClose { display : none; }
|
|
|
|
|
|
.JSW.BarExtension {
|
|
background : #1A991A;
|
|
background : var(--low-color);
|
|
}
|
|
.JSW.active .BarExtension {
|
|
background : #0E9A0E;
|
|
background : var(--active-low-color);
|
|
}
|
|
|
|
|
|
.JSW.BorderTop {
|
|
height : 2px;
|
|
border-top : 0px none transparent;
|
|
background-color : #1A991A;
|
|
background-color : var(--high-color);
|
|
}
|
|
.JSW.active .BorderTop { background : #0E9A0E; background : linear-gradient(to bottom, rgba(153, 153, 153, 0.7), rgba(153, 153, 153, 0.7)); background : var(--active-high-color); }
|
|
.JSW.nonresizable .BorderTop { cursor : default; }
|
|
|
|
.JSW.BorderBottom {
|
|
border-top : 2px solid #999;
|
|
border-top : 2px solid var(--low-color);
|
|
}
|
|
.JSW.active .BorderBottom { border-top : 2px solid #0E9A0E; border-top : 2px solid var(--active-low-color); }
|
|
.JSW.nonresizable .BorderBottom { cursor : default; }
|
|
|
|
.JSW.BorderRight {
|
|
border-left : 2px solid #999;
|
|
border-left : 2px solid var(--low-color);
|
|
}
|
|
.JSW.active .BorderRight { border-left : 2px solid #0E9A0E; border-left : 2px solid var(--active-low-color); }
|
|
.JSW.nonresizable .BorderRight { cursor : default; }
|
|
|
|
.JSW.BorderLeft {
|
|
border-right : 2px solid #999;
|
|
border-right : 2px solid var(--low-color);
|
|
}
|
|
.JSW.active .BorderLeft { border-right : 2px solid #0E9A0E; border-right : 2px solid var(--active-low-color); }
|
|
.JSW.nonresizable .BorderLeft { cursor : default; }
|
|
|
|
.JSW.EdgeTopLeft {
|
|
border-top : 0px none transparent;
|
|
border-left : 0px none transparent;
|
|
background : #1A991A;
|
|
background : linear-gradient(to bottom, #1A991A 7px, #999 17px);
|
|
background : linear-gradient(to bottom, var(--high-color) 7px, var(--low-color) 17px);
|
|
border-top-left-radius : 5px;
|
|
}
|
|
.JSW.active .EdgeTopLeft { background : #0E9A0E; background : linear-gradient(to bottom, rgba(153, 153, 153, 0.7) 2px, #0E9A0E 22px); background : linear-gradient(to bottom, var(--active-high-color) 2px, var(--active-low-color) 22px); }
|
|
.JSW.nonresizable .EdgeTopLeft { cursor : default; }
|
|
|
|
.JSW.EdgeTopRight {
|
|
border-top : 0px none transparent;
|
|
border-right : 0px none transparent;
|
|
background : #1A991A;
|
|
background : linear-gradient(to bottom, #1A991A 7px, #999 17px);
|
|
background : linear-gradient(to bottom, var(--high-color) 7px, var(--low-color) 17px);
|
|
border-top-right-radius : 5px;
|
|
}
|
|
.JSW.active .EdgeTopRight { background : #0E9A0E; background : linear-gradient(to bottom, rgba(153, 153, 153, 0.7) 2px, #0E9A0E 22px); background : linear-gradient(to bottom, var(--active-high-color) 2px, var(--active-low-color) 22px); }
|
|
.JSW.nonresizable .EdgeTopRight { cursor : default; }
|
|
|
|
.JSW.EdgeBottomLeft {
|
|
border-style : solid;
|
|
border-width : 0px;
|
|
border-left-width : 2px;
|
|
border-bottom-width : 2px;
|
|
border-color : #999;
|
|
border-color : var(--low-color);
|
|
border-bottom-left-radius : 5px;
|
|
}
|
|
.JSW.active .EdgeBottomLeft { border-color : #0E9A0E; border-color : var(--active-low-color); }
|
|
.JSW.nonresizable .EdgeBottomLeft { cursor : default; }
|
|
|
|
.JSW.EdgeBottomRight {
|
|
border-style : solid;
|
|
border-width : 0px;
|
|
border-right-width : 2px;
|
|
border-bottom-width : 2px;
|
|
border-color : #999;
|
|
border-color : var(--low-color);
|
|
border-bottom-right-radius : 5px;
|
|
}
|
|
.JSW.active .EdgeBottomRight { border-color : #0E9A0E; border-color : var(--active-low-color); }
|
|
.JSW.nonresizable .EdgeBottomRight { cursor : default; }
|
|
|
|
|
|
|
|
|
|
.JSW.ThrowingBorder {
|
|
position : fixed;
|
|
border : 2px solid #0E9A0E;
|
|
border : 2px solid var(--active-low-color);
|
|
} |