Files
onefinity-firmware/src/stylus/style.styl
sanjayk03-dev e0aa4539dc ui fix
2024-05-31 18:41:27 +05:30

1225 lines
19 KiB
Stylus

body
overflow-y scroll
[v-cloak]
display none
.menu-link
z-index unset
tt
color #000
background #eee
padding 2px
.button-success:not([disabled])
background-color #1cb841
.button-error:not([disabled])
background-color #ca3c3c
.button-warning:not([disabled])
background-color #df7514
.button-secondary:not([disabled])
background-color #42b8dd
.button-submit:not([disabled])
background-color #add1ad
color #fff
.button-blue:not([disabled])
background-color #0078e7
color #fff
.header, .content
padding 0
.clear
clear left
clear right
.header
height 140px
padding 0
.nav-header
padding-left 60px
display flex
.brand
display flex
flex-direction row
align-self center
white-space nowrap
img
width 300px
height 15%
.version
font-size 18pt
color #777
display flex
flex-direction column
justify-content space-evenly
border-left #777 2px solid;
margin-left 15px
padding 0px 10px
font-weight bold
.upgrade-link
margin-left 20px
font-size 16pt
align-self center
color blue
.upgrade-attention
color red
font-size 18pt
align-self center
margin-left 5px
.pi-temp-warning
align-self center
font-size 30pt
font-family Audiowide
display inline
margin 0 30px
.left
color #444
.right
color #e5aa3d
.whitespace
flex-grow 1
.video
position relative
width 174px
height 130px
border 2px solid transparent
border-radius 5px
&:hover
border-color #aaa
&.large
width 100%
margin 5px 0
height inherit
.crosshair
> *
border 1px dashed #ccc
position absolute
.vertical
height 100%
width 0
left 50%
margin-left -1px
.horizontal
height 0
width 100%
top 50%
margin-top -1px
.box
width 16px
height 16px
top 50%
left 50%
margin-top -9px
margin-left -9px
img
width 100%
height 100%
.estop
align-self center
margin 0 30px
.error
background red
.warn
background orange
.success
background green
.fa
font-size 150%
.modal-mask .fa
font-size inherit
.fa.error
background inherit
color red
.fa.warn
background inherit
color orange
.fa.success
background inherit
color green
.load-on
background-color #ccffcc
color #000
@keyframes attention
50%
opacity 0.5
.attention
background-color #f5e138
color #000
animation attention 2s step-start 0s infinite
span.unit
font-size 60%
.status
color #eee
text-align center
padding 0.125em
font-weight bold
margin-bottom 0.5em
text-transform uppercase
&.connecting
color orange
&.disconnected
color red
&.connected
color green
#overlay
position fixed
top 0
left 0
width 100%
height 100%
background-color rgba(0, 0, 0, 0.7)
z-index 2000
color white
font-weight bold
font-size 24pt
text-align center
text-transform uppercase
span
position relative
top 50%
#menu
.save
display block
margin 0.25em 0.6em
height 3.5em
width 8em
.pure-menu-heading
background inherit
padding 0
.pure-menu-link
padding 0.6em
color #fff
.pure-menu-item .pure-menu-link
padding-left 1.5em
#main
margin-left 0.5em
.content
h2
text-transform capitalize
.pure-control-group
label.units
width 6em
text-align left
textarea
width 24em
height 12em
> select, > input:not([type=checkbox])
min-width 300px
> tt
min-width 15.25em
padding 0.7em 1em
border-radius 3px
display inline-block
@keyframes blink
50%
fill #ff9d00
.estop
width 130px
transition 250ms
&.active .ring
animation blink 2s step-start 0s infinite
&:hover .button circle
fill #b72424 !important
svg
cursor pointer
.button:hover
filter brightness(120%)
.control-view
max-width 95%
.drop-down-container
height 50px
.container
display flex
width 100%
height 25rem
margin-bottom 30px
.folders
width 30%
border-right 1px solid #ccc
padding 10px
overflow-y auto
.files
width 70%
padding 10px
display grid
overflow-y auto
.search-bar
margin-bottom 10px
width 50%
.folder-item
padding 10px
.folder-item.selected
font-weight bold
background-color #add1ad
border-radius 5px
table
border-collapse collapse
// Make sure buttons don't turn into circles
button
-webkit-appearance none
border-radius 0px
border-width 1px
border-color darkgrey
// The jogging buttons, etc.
.control-buttons button
font-size 150%
width 100px
height 100px
.jog-units
font-size initial
margin-left 5px
&:first-child
margin 0.5em 0
td, th
border none
.radio-toolbar
input
opacity 0
position fixed
width 0
label
display inline-block
background-color #ddd
padding 10px 20px
font-family sans-serif Arial
font-size 16px
border 2px solid #444
border-radius 4px
.axes
width 100%
.axis-x .name
color #f00
.axis-y .name
color #0f0
.axis-z .name
color #00f
.axis-a .name
color #f80
.axis-b .name
color #0ff
.axis-c .name
color #f0f
td, th
padding 2px
white-space nowrap
border 1px solid #ddd
th
text-align center
vertical-align bottom
td
text-align right
font-family Courier
.homed
background-color #ccffcc
color #000
.warn
background-color #ffffcc
.error
background-color #ffcccc
.axis
.name
text-transform capitalize
vertical-align middle
.name, .position
font-size 24pt
line-height 24pt
.position
width 99%
td.state
text-align left
.fa
margin-left 2px
margin-right 6px
.absolute, .offset
min-width 6em
td.tstate
text-align left
.fa
margin-left 2px
margin-right 6px
tr:nth-child(1) th.actions
text-align right
.jog svg
text
user-select none
font-family Sans
font-weight bold
stroke transparent
fill #444
.button
cursor pointer
stroke #4c4c4c
&:hover
stroke #e55
path
overflow visible
.house
stroke #444
fill #444
.ring
cursor pointer
overflow visible
.button
stroke transparent
&:hover
stroke #e55
text
font-size 8pt
text-anchor middle
.info
empty-cells show
width 100%
display inline-block
th, td
height 1.75em
padding 3px
text-align right
overflow hidden
text-overflow ellipsis
white-space nowrap
border 1px solid #ddd
th
min-width 5.25em
width 5.25em
td
min-width 8em
width 100%
.units
padding 0
select
width 100%
height 1.9em
background-color transparent
border 0
padding 3px
text-align right
.eta
font-size 90%
.progress
height 1.75em
label
float right
.bar
height 1.75em
background #f2ac45
.override
display none /* Hidden for now */
margin 0.5em 0
white-space nowrap
label
font-weight bold
min-width 3.5em
display inline-block
.percent
display inline-block
width 3em
input
border-radius 0
margin -0.4em 0.5em
.override:nth-of-type(1)
clear left
float left
.override:nth-of-type(2)
clear right
float right
.toolbar
clear both
padding 0 0.125em
margin-bottom 50px
> *
margin 0.25em 0.125em
select
max-width 11em
min-width inherit !important
.progress
display inline-block
background #fff
line-height 2em
border 1px solid #aaa
border-radius 3px
width 330px
vertical-align middle
text-align center
div
height 2em
background #f2ac45
label
margin 0 0.125em
white-space nowrap
.tabs
section
min-height 500px
overflow-x hidden
overflow-y auto
padding 0
margin 0
.path-viewer
width 100%
.path-viewer-content
height 500px
.gcode, .history
font-family courier
clear both
overflow auto
width 100%
height 450px
white-space nowrap
.clusterize-scroll
max-height 450px
&.placeholder
color #aaa
.history
padding 0.25em
.gcode ul, .history ul
margin 0
padding 0
list-style none
.gcode ul
li
line-height 15px
li:nth-child(even)
background-color #fafafa
li.highlight
background-color #eaeaea
li > b
font-weight normal
display inline-block
padding 0 0.25em
color #e5aa3d
min-width 4em
.history ul li
cursor pointer
.mdi
clear both
white-space nowrap
padding 0.125em
display flex
> *
margin 0.125em
input
flex 2
.jog
text-align center
> svg
margin 1em
.jog-settings
margin-bottom 1em
input
margin 0 0.5em
vertical-align middle
.macros-div
display flex
flex-wrap wrap
justify-content flex-start
margin 10px
margin-left 50px
margin-right 50px
margin-bottom 30px
.macros-button
height 60px
width 115px
font-weight normal
border-radius 10px
margin-left 1rem
margin-top 1rem
border 0
overflow-wrap break-word
color #fff
box-shadow rgba(0, 0, 0, 0.3) 0px 0px 5px
text-shadow: rgba(0, 0, 0, 0.8) 0px 0px 3px
#macros
width 104%
.warning-box
display flex
background-color #F3FF00
border-radius 5px
border 0
margin-bottom 10px
margin-right 200px
margin-top 10px
align-items center
justify-content center
.new-gcode
height 13rem
width 23rem
resize none
border-radius 10px
padding 20px
resize none
.flex-row-container
display flex
flex-direction row
width 500px
margin-bottom 1rem
.tabs
margin-top 5px
width 850px
padding 20px
.macros-view
padding 30px
width 95%
.macros-tab-content
padding-bottom 20px
border-radius 5px
.macros-form
padding-left 30px
.config-button
height 40px
width 150px
font-weight normal
border-radius 3px
border 0
margin-left 1rem
display flex
align-items center
justify-content space-around
.submit-macros
height 50px
width 140px
color #000
margin-top 30px
font-weight normal
border 0
.path-viewer
table
margin 0.25em
width 100%
.path-viewer-toolbar
> *
margin 0.25em
.tool-button
display inline-block
cursor pointer
border 2px solid transparent
border-radius 2px
text-align center
&:hover
opacity 0.7
border 2px inset #eee
&.active
border 2px inset #888
background #ddd
img
max-height 32px
vertical-align bottom
.fa
font-size 28px
display inline-block
width 32px
.path-viewer-messages
margin 0.125em 0
th, td
padding 0.125em
&.level
text-transform capitalize
.path-viewer-content
background-color #333
background linear-gradient(to bottom, #666 0%, #222 100%);
margin-bottom 0.5em
&.small
.path-viewer-content
width 340px
height 150px
float right
margin-top -88px
.console
.console-wrapper
max-height 400px
overflow-y auto
.message
white-space pre
table
width 100%
margin 0.5em 0
border-collapse collapse
td, th
border 1px solid #ddd
padding 2px
&:first-child
border-left 0
&:last-child
border-right 0
tr
> td
margin 0 0.125em
background-color #fff
tr.log-error td
color red
tr.log-warning td
color orange
tr.log-debug td
color green
.indicators
padding 1em 0
text-align center
table
display inline-block
vertical-align top
margin 0.5em
empty-cells show
border 3px solid #bbb
td, th
padding 4px
white-space nowrap
tr:nth-child(odd)
background #f7f7f7
th
text-align left
td
text-align right
&.inputs, &.outputs
td:nth-child(1), td:nth-child(5)
text-align center
th.header
height 2.5em
border-bottom 3px solid #ccc
text-align center
th.separator
background #ccc
border 1px solid #ccc
padding 1px
&.motor_fault
td, th
text-align center
min-width 1.75em
.fa-eraser
cursor pointer
&:hover
opacity 0.5
.io
&.active
color green
&.inactive
color black
&.warn
background-color transparent
color orange
tt.save
display inline-block
border-radius 2px
background #1cb841
color rgba(0, 0, 0, 0.8)
padding 0.25em
line-height initial
.modbus-program button
margin 0.25em 0
.pure-form .modbus-regs
input, select
border none
box-shadow none
border-radius 0
background transparent
padding 0 0.5em
height 1.75em
line-height 1.75em
input
text-align right
width 6em
button
margin 2px
th, td
border 1px solid #ccc
line-height 1.75em
th
padding 0.5em
&.fixed-regs td, td.reg-index, td.modbus-status
padding 0 0.5em
td.reg-index, td.reg-addr, td.reg-value
text-align right
tr:nth-child(even):not(.warn)
background-color #f3f3f3
.tabs
clear both
> input
display none
> label
display block
float left
width 6em
font-weight bold
cursor pointer
text-decoration none
text-align center
background #f6f6f6
border-top-left-radius 5px
border-top-right-radius 5px
border-top 2px solid #f6f6f6
border-left 1px solid #f6f6f6
border-right 1px solid #f6f6f6
margin-right 2px
> section
display none
clear both
> #tab1:checked ~ #content1,
> #tab2:checked ~ #content2,
> #tab3:checked ~ #content3,
> #tab4:checked ~ #content4,
> #tab5:checked ~ #content5,
> #tab6:checked ~ #content6,
> #tab7:checked ~ #content7,
> #tab8:checked ~ #content8,
> #tab9:checked ~ #content9,
> #tab10:checked ~ #content10,
> #tab11:checked ~ #content11,
> #tab12:checked ~ #content12,
> #tab13:checked ~ #content13,
> #tab14:checked ~ #content14,
> #tab15:checked ~ #content15,
> #tab16:checked ~ #content16,
> #tab17:checked ~ #content17,
> #tab18:checked ~ #content18,
> #tab19:checked ~ #content19,
> #tab20:checked ~ #content20
display block
[id^="tab"]:checked + label
background #fff
border-top 2px solid #ddd
border-left 1px solid #ddd
border-right 1px solid #ddd
border-bottom 1px solid #fff
margin-bottom -1px
.tab-content
border 1px solid #ddd
padding 0.5em
.motor.slave
.tmpl-input-axis .units::after
content "(slave motor)"
white-space nowrap
fieldset.limits, fieldset.homing, fieldset.motion .pure-control-group,
fieldset.power .pure-control-group.tmpl-input-enabled
display none
fieldset.motion .pure-control-group.tmpl-input-reverse
display inherit
.admin-general-view, .admin-network-view
h2:not(:first-of-type)
margin-top 2em
a
text-decoration none
.modal-mask
position fixed
z-index 9998
top 0
left 0
width 100%
height 100%
background-color rgba(0, 0, 0, .25)
display table
transition opacity .3s ease
.modal-wrapper
display table-cell
vertical-align middle
.modal-container
width 380px
margin 0px auto
padding 20px 30px
background-color #fff
border-radius 2px
box-shadow 0 2px 8px rgba(0, 0, 0, .33)
transition all .3s ease
font-family Helvetica, Arial, sans-serif
.modal-header
text-decoration underline
.modal-footer
text-align right
.footer
width 100%
display flex
justify-content center
.modal-enter, .modal-leave
opacity 0
.modal-enter .modal-container
transform scale(1.1)
.modal-leave .modal-container
transform scale(0.9)
.file-upload
display none
.error-message
&.modal-mask .modal-wrapper .modal-container
width auto
max-width 800px
.modal-header h3
white-space nowrap
overflow hidden
text-overflow ellipsis
.estop
float right
transform scale(0.75)
margin-top -30px
.console
margin-bottom 1em
clear both
.wifi-confirm table
th
text-align right
th, td
padding 0 4px
.cheat-sheet
table
border-collapse collapse
margin-bottom 0.5em
*
text-align left
th, td
border 1px solid #eee
padding 4px
tr.header-row
background #eee
tr:nth-child(even)
background #f7f7f7
tr.unimplemented
background #ffff9b
tr.spacer-row
background transparent
th, td
border none
height 1em
@media only screen and (max-width 970px)
.control-view #control
.path-viewer.small .path-viewer-content
margin-top inherit
float inherit
@media only screen and (max-width 940px)
.header
height auto
.header-content > .banner
margin-left 70px
padding-top 0
float none
.control-view #control
.axes
.axis
.name, .position
font-size 18pt
line-height 18pt
.absolute, .offset
display none
> *:nth-of-type(n)
float none
clear both
width 99%
.tab_container
width 98%
.reset-variants
padding-left 40px
padding-bottom 20px
display grid
grid-template-rows repeat(4, auto)
grid-template-columns min-content auto
grid-gap 20px 10px
input[type="radio"]
width 30px
height 30px
label
font-size 16pt
align-self center
.pure-form-aligned .pure-control-group label:not(.extra)
width 12em
.pure-form-aligned .pure-control-group label.extra
width 8em
input.input-name
width 300px
height 40px
border-top-right-radius 8px
border-bottom-right-radius 8px
border-top-left-radius 5px
border-bottom-left-radius 5px
border-width 1px
border-color #434242
padding-left 10px
margin-left 2px
.input-container
display flex
height 50px
align-items center
p.title
font-size 20px
padding-top 20px
font-weight 600
input.input-color
height 45px
width 45px
border 1px solid #fdfdfd
border-top-left-radius 8px
border-bottom-left-radius 8px
button
border-radius 8px
border-width 1px
border 1
.input-field
margin-top 10px