diff options
Diffstat (limited to 'assets/index.css')
-rw-r--r-- | assets/index.css | 215 |
1 files changed, 215 insertions, 0 deletions
diff --git a/assets/index.css b/assets/index.css new file mode 100644 index 0000000..83f9602 --- /dev/null +++ b/assets/index.css @@ -0,0 +1,215 @@ +@font-face { + font-family: SourceSansPro; + src: url("./fonts/SourceSansPro-Regular.otf") format("opentype"); +} + + +html, body { + background-color: #353b48; + margin: 0; + height: 100%; + user-select: none; +} + +#topbar { + -ms-overflow-style: hidden; + -webkit-app-region: drag; + background-color: green; + z-index: 99; + box-shadow: 0px 0px 2px 1px rgb(0, 0, 0); +} + +#topbar > span { + font-family: SourceSansPro; + line-height: 14pt; + padding-top: 1pt; + padding-left: 3pt; + color: rgba(0, 0, 0, 0.75); +} + + +.topbar-btn-container { + -webkit-app-region:no-drag; + color:white; + position: absolute; + right: 0; + height: 16pt; + z-index: 128; + top: 0; +} + +.topbar-btn-container > button { + background-color: rgba(0,0,0,0); + border:none; + height: 16pt; + line-height: 16pt; +} + +.topbar-btn-container > button:hover { + background-color: rgba(0,0,0,0.27); +} +.topbar-btn-container > button:focus { + background-color: rgba(0,0,0,0.27); + outline: none; +} + +/* TODO min and max with/height for sidebar and footer */ +.outer_wrapper { + display: grid; + background-color: lightgreen; + height: 100%; + grid-template-rows: 16pt 1fr 42pt; +} +.inner_wrapper { + display: grid; + background-color: pink; + grid-template-columns: 1fr 120pt; +} + + +.content { + background-color: rgb(200,200,200); +} + +.sidebar { + background-color: #353b48; + border-left: 1pt #353b48 solid; + box-shadow: 0px 0px 4px 0px black; + z-index: 3; +} + +.footer { + background-color: rgb(140,140,140); + box-shadow: 0px 0px 2px 1px rgb(0, 0, 0); + overflow: hidden; + z-index: 4; +} + +#play { + border: 0.5pt darkred solid; + height: 34pt; + margin: 4pt 4pt; + width: 190pt; + font-size: x-large; + font-family: SourceSansPro; +} + +#play:focus { + border-color: white; + outline: none; +} + +#play:hover { + +} + +#play:active { + +} + +.sidebarItem { + border-top: 0.5pt hsla(215, 15%, 32%, 1) solid; + user-select: none; + cursor: pointer; +} + +.sidebarItem > .title { + /*outline: 1pt red dotted; */ + box-sizing: content-box; + position: relative; + height: 36pt; + overflow: hidden; + background: #2f3640; + border-bottom: 0.5pt hsla(215, 15%, 18%, 1) solid; +} + +.sidebarItem > .title > div { + font-family: SourceSansPro; + position: absolute; + left: 14pt; + padding-left: 10pt; + height: 35.5pt; + line-height: 35.5pt; + z-index: 20; + /* outline: 1pt yellow dotted; */ + color: white; + font-size: 13pt; + width: 100%; + background: linear-gradient(to right,rgba(0,0,0,0),#2f3640 25pt); +} + +.sidebarItem > .title > div:hover { + background: linear-gradient(to right,rgba(0,0,0,0),hsla(215, 15%, 24%, 1) 25pt); +} + +.sidebarItem.selected > .title { + background: hsla(215, 15%, 26%, 1); +} +.sidebarItem.selected > .title > div { + background: linear-gradient(to right,rgba(0,0,0,0),hsla(215, 15%, 28%, 1) 25pt); +} + +.sidebarItem.selected > .title { + cursor: default; +} + +.sidebarItem > .title > img { + height: 34pt; + width: 34pt; + position: absolute; + z-index: 5; + /*outline: 1pt red dotted;*/ + margin: 1pt 0; + pointer-events: none; +} + +.sidebarItem > .colapse { + max-height: 0; + overflow: hidden; + transition: max-height 0.25s ease-out; +} + +.sidebarItem.selected > .colapse { + max-height: 500px; + transition: max-height 0.25s ease-in; +} + +.sidebarItem > .colapse > div { + padding:4pt; + color:grey; + border-bottom: 0.5pt hsla(215, 15%, 20%, 1) solid; +} +.sidebarItem > .colapse > div.selected { + cursor: default; +} +.sidebarItem > .colapse > div > svg { + margin-right:4pt; + color: magenta; +} + +.sidebarItem > .colapse > div.selected > svg { + margin-right:4pt; + color: red; +} + +#contentBackground { + position: fixed; + left: : -5%; + top: -5%; + min-width: 110%; + min-height: 110%; + z-index: 0; + opacity: 1; + background-color: #f5f6fa; + transition: opacity 1s ease-out; +} + +#contentBackground.hidden { + opacity: 0; +} + +#contentBackground > img { + min-width: 100%; + min-height: 100%; + pointer-events: none; +} |