.oo-ui-dialog {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.5);
+ /* Opening and closing animation */
+
opacity: 0;
- -webkit-transition: all 250ms ease-in-out;
- -moz-transition: all 250ms ease-in-out;
- -ms-transition: all 250ms ease-in-out;
- -o-transition: all 250ms ease-in-out;
- transition: all 250ms ease-in-out;
}
.oo-ui-dialog > .oo-ui-window-frame {
- background-color: #fff;
- border: solid 1px #ccc;
- border-radius: 0.5em;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
- box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3);
+}
+
+.oo-ui-dialog.oo-ui-window-setup,
+.oo-ui-dialog.oo-ui-window-setup > .oo-ui-window-frame {
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
-.oo-ui-dialog-open {
+.oo-ui-dialog.oo-ui-window-ready {
opacity: 1;
}
-.oo-ui-dialog-open > .oo-ui-window-frame {
+.oo-ui-dialog.oo-ui-window-ready > .oo-ui-window-frame {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
+.oo-ui-dialog-content .oo-ui-window-head,
+.oo-ui-dialog-content .oo-ui-window-body,
+.oo-ui-dialog-content .oo-ui-window-foot {
+ position: absolute;
+ right: 0;
+ left: 0;
+ overflow: hidden;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.oo-ui-dialog-content .oo-ui-window-head {
+ top: 0;
+ height: 3.8em;
+ padding: 0.5em;
+}
+
+.oo-ui-dialog-content .oo-ui-window-title {
+ line-height: 2.8em;
+}
+
+.oo-ui-dialog-content .oo-ui-window-icon {
+ width: 2.4em;
+ height: 2.8em;
+ line-height: 2.8em;
+}
+
+.oo-ui-dialog-content .oo-ui-window-closeButton {
+ float: right;
+ margin: 0.25em 0.25em;
+}
+
+.oo-ui-dialog-content .oo-ui-window-body {
+ top: 3.8em;
+ bottom: 4.8em;
+}
+
+.oo-ui-dialog-content-footless .oo-ui-window-body {
+ bottom: 0;
+}
+
+.oo-ui-dialog > .oo-ui-window-frame {
+ top: 1em;
+ bottom: 1em;
+ background-color: #fff;
+ border: solid 1px #ccc;
+ border-radius: 0.5em;
+ box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3);
+}
+
+.oo-ui-dialog-small > .oo-ui-window-frame {
+ width: 400px;
+ max-height: 230px;
+}
+
+.oo-ui-dialog-medium > .oo-ui-window-frame {
+ width: 600px;
+ max-height: 460px;
+}
+
+.oo-ui-dialog-large > .oo-ui-window-frame {
+ width: 800px;
+ max-height: 690px;
+}
+
.oo-ui-dialog-content .oo-ui-window-head,
.oo-ui-dialog-content .oo-ui-window-foot {
z-index: 1;
box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25);
}
+.oo-ui-dialog-content .oo-ui-window-foot {
+ bottom: 0;
+ height: 4.8em;
+ padding: 1em;
+}
+
+.oo-ui-dialog-content .oo-ui-window-foot .oo-ui-buttonedElement-framed {
+ margin: 0.125em 0.25em;
+}
+
.oo-ui-dialog-content .oo-ui-window-overlay {
z-index: 3;
}
}
.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button {
+ padding: 0.2em 0.8em;
+ margin: 0.1em 0;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
background: #eeeeee;
background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
}
+.oo-ui-buttonedElement-framed.oo-ui-iconedElement .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
+ margin-right: -0.5em;
+ margin-left: -0.5em;
+}
+
+.oo-ui-buttonedElement-framed.oo-ui-iconedElement.oo-ui-labeledElement .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
+ margin-right: 0.3em;
+ margin-left: -0.5em;
+}
+
.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button {
background: #cde7f4;
background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #eaf4fa), color-stop(100%, #b0d9ee));
box-shadow: none;
}
+.oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout {
+ padding: 1.5em;
+}
+
.oo-ui-bookletLayout-outlinePanel {
border-right: solid 1px #ddd;
}
font-size: 1.5em;
}
+.oo-ui-panelLayout {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+.oo-ui-panelLayout-padded {
+ padding: 2em;
+}
+
.oo-ui-barToolGroup .oo-ui-tool {
margin: -1px 0 -1px -1px;
border: solid 1px transparent;