mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Samuel Degueldre
b8b5190bc6
Currently, some of the things on the playground must be changed directly on the master branch while other things require checking out the gh-pages branch and making the modifications there. Even when changes need to be made on the master branch, all changes that are not direcly in owl itself need to be copied by hand to the gh-pages branch. This commit moves all files that exist on the gh-pages branch to the master branch in the docs folder, this change will require configuring the github page to use the docs folder instead of a separate branch, but will make maintenance of the github page and playground easier going forward.
195 lines
2.9 KiB
CSS
195 lines
2.9 KiB
CSS
/* GENERIC STUFF ****************************************/
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
.btn {
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
margin: 5px;
|
|
}
|
|
|
|
/* APPLICATION ROOT ****************************************/
|
|
.playground {
|
|
display: grid;
|
|
height: 100%;
|
|
width: 100%;
|
|
grid-template-columns: auto 8px 1fr;
|
|
}
|
|
|
|
/* LEFT BAR ****************************************/
|
|
.left-bar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #2f3129;
|
|
}
|
|
|
|
.left-bar.split {
|
|
grid-template-rows: 50px 60% 23px 30%;
|
|
}
|
|
|
|
.menubar {
|
|
background-color: #1c2128;
|
|
color: white;
|
|
font-size: 18px;
|
|
display: flex;
|
|
flex: 0 0 50px;
|
|
flex-direction: row-reverse;
|
|
align-items: center;
|
|
user-select: none;
|
|
}
|
|
|
|
.menubar select {
|
|
margin: 10px;
|
|
font-size: 16px;
|
|
height: 25px;
|
|
}
|
|
|
|
.run-code {
|
|
margin-right: 12px;
|
|
height: 25px;
|
|
border: 2px solid transparent;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.run-code:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.flash {
|
|
background-position: center;
|
|
transition: background 0.5s;
|
|
}
|
|
|
|
.flash:active {
|
|
background-color: #41454a;
|
|
background-size: 100%;
|
|
transition: background 0s;
|
|
}
|
|
|
|
.layout-selector {
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
margin: 5px;
|
|
}
|
|
|
|
.share-code {
|
|
position: relative;
|
|
}
|
|
|
|
.copied-notification {
|
|
font-size: x-small;
|
|
position: absolute;
|
|
bottom: -5px;
|
|
white-space: nowrap;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
/* TABBED EDITOR ****************************************/
|
|
|
|
.tabbed-editor {
|
|
flex: 2 2 auto;
|
|
position: relative;
|
|
}
|
|
|
|
.separator.horizontal + .tabbed-editor {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.tabBar {
|
|
color: white;
|
|
height: 22px;
|
|
margin-top: -22px;
|
|
padding-left: 5px;
|
|
user-select: none;
|
|
width: 170px;
|
|
}
|
|
|
|
.tabBar.resizeable {
|
|
cursor: row-resize;
|
|
width: 100%;
|
|
}
|
|
|
|
.tab {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
padding: 0 8px;
|
|
font-size: 16px;
|
|
line-height: 20px;
|
|
width: 34px;
|
|
text-align: center;
|
|
border-bottom: 2px solid transparent;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tab.active {
|
|
border-bottom: 2px solid gray;
|
|
}
|
|
|
|
.code-editor {
|
|
margin-top: 8px;
|
|
height: calc(100% - 10px);
|
|
}
|
|
|
|
/* SEPARATOR ****************************************/
|
|
|
|
.separator {
|
|
background-color: #1c2128;
|
|
cursor: col-resize;
|
|
}
|
|
|
|
.separator.horizontal {
|
|
height: 20px;
|
|
}
|
|
|
|
/* RIGHT PANE ****************************************/
|
|
.right-pane {
|
|
background-color: bisque;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.right-pane iframe {
|
|
background-color: white;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
}
|
|
|
|
.right-pane iframe.disabled {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.content {
|
|
height: 100%;
|
|
}
|
|
.right-pane .welcome {
|
|
text-align: center;
|
|
font-size: 30px;
|
|
color: gray;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.right-pane .url {
|
|
font-size: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.url a {
|
|
color: gray;
|
|
}
|
|
|
|
.right-pane .note {
|
|
font-size: 18px;
|
|
text-align: left;
|
|
margin-top: 20px;
|
|
padding: 5%;
|
|
}
|
|
|