264 lines
5.5 KiB
Sass
264 lines
5.5 KiB
Sass
// this file should be imported into one that has the color definitions
|
|
@import "gruvbox_light"
|
|
$fg: $fg1 !default
|
|
$fg-hl: $fg0 !default
|
|
$fg-alt: $fg2 !default
|
|
$fg-alt-hl: $fg1 !default
|
|
$bg: $bg0-hard !default
|
|
$bg-hl: $bg1 !default
|
|
|
|
$accent: $light-red !default
|
|
|
|
$button-bg: $bg !default
|
|
$button-bg-hl: $bg-hl !default
|
|
$button-fg: $fg !default
|
|
$button-fg-hl: $fg-hl !default
|
|
|
|
$font-size: 16px
|
|
$monofont: "UbuntuMono", monospace
|
|
$footer-height: 20px
|
|
$footer-padding-y: 2px
|
|
$footer-padding-x: 12px
|
|
$box-margin: 0.4rem
|
|
$file-height: 300px
|
|
$splash-font-size: 40px
|
|
$button-font-size: $font-size
|
|
$button-padding: 8px
|
|
$move-button-font-size: $font-size - 2px
|
|
$move-button-padding: $button-padding - 2px
|
|
|
|
*
|
|
font-family: "Ubuntu", Verdana, sans-serif
|
|
color: $fg
|
|
// font-size: $font-size
|
|
|
|
|
|
html, body // fill entire screen so that footer is always on bottom
|
|
height: 100%
|
|
margin: 0
|
|
|
|
body
|
|
background-color: $bg
|
|
// have main up top and footer at bottom
|
|
display: flex
|
|
flex-direction: column
|
|
min-height: 100%
|
|
|
|
nav
|
|
margin-top: 0.3rem
|
|
flex-shrink: 0
|
|
|
|
main
|
|
flex-grow: 1 // puts the statusline at the bottom of the page
|
|
padding-bottom: $footer-height + 2 * $footer-padding-y
|
|
*
|
|
margin-left: auto
|
|
margin-right: auto
|
|
text-align: center
|
|
|
|
.main-box
|
|
background-color: $bg1
|
|
.current-file
|
|
width: 100%
|
|
height: $file-height
|
|
position: relative
|
|
overflow: scroll
|
|
background: $bg1
|
|
|
|
.splash-text
|
|
font-size: $splash-font-size
|
|
padding-top: calc(($file-height - $splash-font-size - $button-font-size - 2 * $button-padding - 20px) / 2)
|
|
padding-bottom: 20px
|
|
// padding-bottom: ($file-height - $splash-font-size - $button-font-size - 2 * $button-padding) / 2
|
|
filter: drop-shadow(0.10rem 0.10rem 0 $accent)
|
|
|
|
img, video, audio
|
|
max-width: 100%
|
|
max-height: 100%
|
|
width: auto
|
|
height: auto
|
|
position: absolute
|
|
top: 0
|
|
bottom: 0
|
|
left: 0
|
|
right: 0
|
|
margin: auto
|
|
|
|
.second-box
|
|
padding-top: $box-margin
|
|
padding-bottom: $box-margin
|
|
|
|
|
|
footer
|
|
padding: $footer-padding-y $footer-padding-x
|
|
font-size: $footer-height - $footer-padding-y * 2
|
|
background: $fg
|
|
color: $bg
|
|
height: $footer-height
|
|
min-height: $footer-height // idk why but this is required
|
|
width: 100%
|
|
position: fixed
|
|
bottom: 0
|
|
overflow-x: scroll
|
|
overflow-y: hidden
|
|
white-space: nowrap
|
|
*
|
|
color: $bg
|
|
.statusline
|
|
font-family: $monofont
|
|
text-align: left
|
|
*
|
|
font-family: $monofont
|
|
|
|
|
|
a
|
|
color: $fg-hl
|
|
|
|
.path
|
|
font-family: $monofont
|
|
|
|
.key
|
|
padding: 3px 6px
|
|
background: $fg1
|
|
color: $bg0
|
|
border-style: solid
|
|
border-width: 1px
|
|
border-color: $fg0-hard
|
|
border-radius: 4px
|
|
font-family: $monofont
|
|
|
|
// p
|
|
// text-align: justify
|
|
|
|
code
|
|
color: $fg1
|
|
font-family: $monofont
|
|
text-align: left
|
|
|
|
hr
|
|
color: $accent
|
|
|
|
h1, h2
|
|
text-align: center
|
|
filter: drop-shadow(0.04em 0.04em 0 $accent)
|
|
padding: 0px 20px
|
|
|
|
button, input
|
|
color: $button-fg
|
|
background-color: $button-bg
|
|
font-size: $button-font-size
|
|
padding: $button-padding
|
|
border-radius: 0
|
|
filter: drop-shadow(0.1rem 0.1rem 0 $accent)
|
|
font-family: $monofont
|
|
margin: 0.2rem
|
|
.move-buttons
|
|
margin: 0
|
|
|
|
.move-button
|
|
font-size: $move-button-font-size
|
|
padding: $move-button-padding
|
|
|
|
button:hover
|
|
color: $button-fg-hl
|
|
background-color: $button-bg-hl
|
|
|
|
#start-button
|
|
filter: drop-shadow(0.1rem 0.1rem 0 $light-green)
|
|
#configure-button
|
|
filter: drop-shadow(0.1rem 0.1rem 0 $light-blue)
|
|
#undo-button
|
|
filter: drop-shadow(0.1rem 0.1rem 0 $light-gray)
|
|
#skip-button
|
|
filter: drop-shadow(0.1rem 0.1rem 0 $light-gray)
|
|
#key
|
|
width: 20px
|
|
text-align: center
|
|
// #directory
|
|
#save-button
|
|
filter: drop-shadow(0.1rem 0.1rem 0 $light-red)
|
|
#load-button
|
|
filter: drop-shadow(0.1rem 0.1rem 0 $light-blue)
|
|
|
|
|
|
|
|
.add-mapping-form
|
|
margin: auto
|
|
padding-bottom: $box-margin
|
|
width: 400px
|
|
.form-row
|
|
text-align: left
|
|
*
|
|
text-align: left
|
|
label
|
|
display: inline-block
|
|
width: 100px
|
|
text-align: right
|
|
input
|
|
margin-left: 0
|
|
text-align: left
|
|
button
|
|
margin-left: 0
|
|
// width: 50%
|
|
|
|
|
|
.filename-input
|
|
width: 90%
|
|
margin: auto
|
|
padding: 0.1rem
|
|
.file-list
|
|
width: 90%
|
|
margin: auto
|
|
margin-top: 1rem
|
|
.file-list-content
|
|
overflow: hidden
|
|
border-color: $dark-blue
|
|
border-style: solid
|
|
border-width: 2px
|
|
min-height: 0.2rem
|
|
p
|
|
margin: 0
|
|
padding: 0.1rem
|
|
text-align: left
|
|
.file-list-item:hover
|
|
background: $dark-blue !important
|
|
color: $bg1
|
|
cursor: pointer
|
|
|
|
|
|
|
|
.file-list-item:nth-child(even)
|
|
background: $bg1
|
|
.file-list-item:nth-child(odd)
|
|
background: $bg2
|
|
|
|
.selected-file-list-item
|
|
background: $light-blue !important
|
|
color: $bg1
|
|
|
|
|
|
// Desktop optimierung
|
|
@media only screen and (min-width: 900px)
|
|
main
|
|
display: flex
|
|
flex-direction: row
|
|
padding-bottom: $footer-height + 2 * $footer-padding-y
|
|
.main-box
|
|
width: 75%
|
|
max-height: calc(100vh - $footer-height - 2 * $footer-padding-y)
|
|
.splash-text
|
|
filter: drop-shadow(0.20rem 0.20rem 0 $accent)
|
|
|
|
.second-box
|
|
display: flex
|
|
flex-direction: column
|
|
width: 25%
|
|
max-height: calc(100vh - $footer-height - 2 * $footer-padding-y)
|
|
overflow: scroll
|
|
padding-top: 0
|
|
padding-bottom: 0
|
|
|
|
.current-file
|
|
height: 100%
|
|
width: 100%
|