0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update CSS

Browse source
This commit is contained in:
rolux 2011-08-15 14:25:58 +02:00
parent e063626bdc
commit ee93ed673e
4 changed files with 36 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
source/Ox.UI/css/Ox.UI.css
View file

@ -222,87 +222,12 @@ Dialog
*/ */
.OxDialog { .OxDialog {
position: absolute;
//left: 0;
//top: 0;
//right: 0;
//bottom: 0;
//margin: auto;
z-index: 11;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.OxDialog > .OxTitleBar {
//left: 0px;
//right: 0px;
//height: 16px;
//padding: 3px 8px 5px 8px;
//padding: 3px 0 5px 0;
cursor: move;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
.OxDialog > .OxTitleBar > .OxTitle {
margin: 4px 8px 0 8px;
font-size: 11px;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.OxDialog > .OxContent {
position: relative;
top: 0;
bottom: 24px;
height: 100%;
//padding: 16px;
//font-size: 12px;
//line-height: 16px;
}
.OxDialog > .OxButtonsBar {
left: 0;
right: 0;
bottom: 0;
height: 24px;
//text-align: right;
-moz-border-radius-bottomleft: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
.OxDialog > .OxButtonsBar > .OxButton {
margin: 4px 2px 0 2px;
}
.OxDialog > .OxButtonsBar > .OxButton.OxLeft {
float: left;
}
.OxDialog > .OxButtonsBar > .OxButton.OxLeft:first-child {
margin-left: 16px;
}
.OxDialog > .OxButtonsBar > .OxButton.OxRight {
float: right;
}
.OxDialog > .OxButtonsBar > .OxResize {
float: right;
height: 24px;
width: 14px;
cursor: se-resize;
}
.OxWindow {
position: absolute; position: absolute;
border-radius: 8px; border-radius: 8px;
z-index: 11; z-index: 11;
} }
.OxWindow > .OxTitlebar { .OxDialog > .OxTitlebar {
position: absolute; position: absolute;
height: 24px; height: 24px;
text-align: center; text-align: center;
@ -310,11 +235,11 @@ Dialog
border-top-right-radius: 8px; border-top-right-radius: 8px;
} }
.OxWindow > .OxTitlebar > .OxButton { .OxDialog > .OxTitlebar > .OxButton {
position: absolute; position: absolute;
} }
.OxWindow > .OxTitlebar > .OxTitle { .OxDialog > .OxTitlebar > .OxTitle {
margin-top: 3px; margin-top: 3px;
font-size: 13px; font-size: 13px;
font-weight: bold; font-weight: bold;
@ -323,7 +248,7 @@ Dialog
white-space: nowrap; white-space: nowrap;
} }
.OxWindow > .OxContent { .OxDialog > .OxContent {
position: absolute; position: absolute;
left: 0; left: 0;
top: 24px; top: 24px;
@ -331,7 +256,7 @@ Dialog
overflow: auto; overflow: auto;
} }
.OxWindow > .OxButtonsbar { .OxDialog > .OxButtonsbar {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
height: 24px; height: 24px;
@ -339,71 +264,71 @@ Dialog
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
cursor: move; cursor: move;
} }
.OxWindow > .OxButtonsbar > .OxButtonsLeft { .OxDialog > .OxButtonsbar > .OxButtonsLeft {
margin-left: 4px; margin-left: 4px;
float: left; float: left;
} }
.OxWindow > .OxButtonsbar > .OxButtonsRight { .OxDialog > .OxButtonsbar > .OxButtonsRight {
margin-right: 4px; margin-right: 4px;
float: right; float: right;
} }
.OxWindow > .OxButtonsbar .OxButton { .OxDialog > .OxButtonsbar .OxButton {
margin: 4px 2px 4px 2px; margin: 4px 2px 4px 2px;
} }
.OxWindow > .OxResize { .OxDialog > .OxResize {
position: absolute; position: absolute;
} }
.OxWindow > .OxResizeTopLeft { .OxDialog > .OxResizeTopLeft {
left: -2px; left: -2px;
top: -2px; top: -2px;
width: 10px; width: 10px;
height: 10px; height: 10px;
cursor: nwse-resize; cursor: nwse-resize;
} }
.OxWindow > .OxResizeTop { .OxDialog > .OxResizeTop {
left: 8px; left: 8px;
top: -2px; top: -2px;
right: 8px; right: 8px;
height: 5px; height: 5px;
cursor: ns-resize; cursor: ns-resize;
} }
.OxWindow > .OxResizeTopRight { .OxDialog > .OxResizeTopRight {
right: -2px; right: -2px;
top: -2px; top: -2px;
width: 10px; width: 10px;
height: 10px; height: 10px;
cursor: nesw-resize; cursor: nesw-resize;
} }
.OxWindow > .OxResizeLeft { .OxDialog > .OxResizeLeft {
left: -2px; left: -2px;
top: 8px; top: 8px;
width: 5px; width: 5px;
bottom: 8px; bottom: 8px;
cursor: ew-resize; cursor: ew-resize;
} }
.OxWindow > .OxResizeRight { .OxDialog > .OxResizeRight {
right: -2px; right: -2px;
top: 8px; top: 8px;
width: 5px; width: 5px;
bottom: 8px; bottom: 8px;
cursor: ew-resize; cursor: ew-resize;
} }
.OxWindow > .OxResizeBottomLeft { .OxDialog > .OxResizeBottomLeft {
left: -2px; left: -2px;
bottom: -2px; bottom: -2px;
width: 10px; width: 10px;
height: 10px; height: 10px;
cursor: nesw-resize; cursor: nesw-resize;
} }
.OxWindow > .OxResizeBottom { .OxDialog > .OxResizeBottom {
left: 8px; left: 8px;
bottom: -2px; bottom: -2px;
right: 8px; right: 8px;
height: 5px; height: 5px;
cursor: ns-resize; cursor: ns-resize;
} }
.OxWindow > .OxResizeBottomRight { .OxDialog > .OxResizeBottomRight {
right: -2px; right: -2px;
bottom: -2px; bottom: -2px;
width: 10px; width: 10px;

12
source/Ox.UI/js/Window/Ox.Dialog.js
View file

@ -1,13 +1,13 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript // vim: et:ts=4:sw=4:sts=4:ft=javascript
/*@ /*@
Ox.Dialog <f:Ox.Element> Window object Ox.Dialog <f:Ox.Element> Dialog object
() -> <f> Window object () -> <f> Dialog object
(options) -> <f> Window object (options) -> <f> Dialog object
(options, self) -> <f> Window object (options, self) -> <f> Dialog object
options <o> Options object options <o> Options object
draggable <b|true> is window draggable draggable <b|true> is window draggable
fullscreenable <b|true> fixme: silly name fullscreenable <b|true> fixme: silly name
height <n|225> height height <n|200> height
resizeable <b|true> resizeable resizeable <b|true> resizeable
scaleable <b|true> sccaleable scaleable <b|true> sccaleable
width <n|400> width width <n|400> width
@ -40,7 +40,7 @@ Ox.Dialog = function(options, self) {
width: 400 width: 400
}) })
.options(options || {}) .options(options || {})
.addClass('OxWindow') .addClass('OxDialog')
.hide() .hide()
.appendTo(Ox.UI.$body); .appendTo(Ox.UI.$body);

22
source/Ox.UI/themes/classic/css/classic.css
View file

@ -75,37 +75,27 @@ Dialog
*/ */
.OxThemeClassic .OxDialog { .OxThemeClassic .OxDialog {
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75); -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
} }
.OxThemeClassic .OxDialog .OxBar { .OxThemeClassic .OxDialog .OxBar {
//background: -moz-linear-gradient(top, rgba(208, 208, 208, 0.96), rgba(176, 176, 176, 0.96)); background: -moz-linear-gradient(top, rgba(224, 224, 224, 0.95), rgba(192, 192, 192, 0.95));
//background: -webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, 0.96)), to(rgba(176, 176, 176, 0.96))); background: -webkit-linear-gradient(top, rgba(224, 224, 224, 0.95), rgba(192, 192, 192, 0.95));
background: -moz-linear-gradient(top, rgba(224, 224, 224, 0.96), rgba(192, 192, 192, 0.96));
background: -webkit-linear-gradient(top, rgba(224, 224, 224, 0.96), rgba(192, 192, 192, 0.96));
} }
.OxThemeClassic .OxDialog .OxContent { .OxThemeClassic .OxDialog .OxContent {
//background: rgba(224, 224, 224, 0.96); background: rgba(208, 208, 208, 0.95);
background: rgba(208, 208, 208, 0.96);
} }
.OxThemeClassic .OxDialog .OxTitle { .OxThemeClassic .OxDialog .OxTitle {
color: rgb(48, 48, 48); //color: rgb(48, 48, 48);
} }
.OxThemeClassic .OxLayer { .OxThemeClassic .OxLayer {
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
} }
.OxThemeClassic .OxWindow {
-moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}
.OxThemeClassic .OxWindow .OxContent {
background: rgba(208, 208, 208, 0.95);
}
/* /*
================================================================================ ================================================================================
Document Document

18
source/Ox.UI/themes/modern/css/modern.css
View file

@ -78,13 +78,16 @@ Dialog
*/ */
.OxThemeModern .OxDialog { .OxThemeModern .OxDialog {
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 1); -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 1); -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
}
.OxThemeModern .OxDialog .OxContent {
background: rgba(48, 48, 48, 0.95);
} }
.OxThemeModern .OxDialog .OxBar { .OxThemeModern .OxDialog .OxBar {
background: -moz-linear-gradient(top, rgba(64, 64, 64, 0.96), rgba(32, 32, 32, 0.96)); background: -moz-linear-gradient(top, rgba(64, 64, 64, 0.95), rgba(32, 32, 32, 0.95));
background: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.96), rgba(32, 32, 32, 0.96)); background: -webkit-linear-gradient(top, rgba(64, 64, 64, 0.95), rgba(32, 32, 32, 0.95));
} }
.OxThemeModern .OxDialog .OxContent { .OxThemeModern .OxDialog .OxContent {
@ -95,13 +98,6 @@ Dialog
background: rgb(0, 0, 0); background: rgb(0, 0, 0);
} }
.OxThemeModern .OxWindow > div {
-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
}
.OxThemeModern .OxWindow .OxContent {
background: rgba(48, 48, 48, 0.95);
}
/* /*