Fix webui
This commit is contained in:
Ludovic Fernandez
Traefiker Bot
parent
67847c3117
commit
b72937e8fb
28 changed files with 696 additions and 610 deletions
|
|
@ -1,22 +1,23 @@
|
|||
@charset "utf-8"
|
||||
|
||||
@import 'typography'
|
||||
@import 'variables'
|
||||
@import 'colors'
|
||||
@import '../../node_modules/bulma/sass/utilities/all'
|
||||
@import '../../node_modules/bulma/sass/base/all'
|
||||
@import '../../node_modules/bulma/sass/grid/all'
|
||||
@import '../../node_modules/bulma/sass/elements/container'
|
||||
@import '../../node_modules/bulma/sass/elements/tag'
|
||||
@import '../../node_modules/bulma/sass/elements/box'
|
||||
@import '../../node_modules/bulma/sass/elements/form'
|
||||
@import '../../node_modules/bulma/sass/elements/table'
|
||||
@import '../../node_modules/bulma/sass/components/navbar'
|
||||
@import '../../node_modules/bulma/sass/components/tabs'
|
||||
@import '../../node_modules/bulma/sass/elements/notification'
|
||||
@import '~bulma/sass/utilities/all'
|
||||
@import '~bulma/sass/base/all'
|
||||
@import '~bulma/sass/grid/all'
|
||||
@import '~bulma/sass/elements/container'
|
||||
@import '~bulma/sass/elements/tag'
|
||||
@import '~bulma/sass/elements/other'
|
||||
@import '~bulma/sass/elements/box'
|
||||
@import '~bulma/sass/elements/form'
|
||||
@import '~bulma/sass/elements/table'
|
||||
@import '~bulma/sass/components/navbar'
|
||||
@import '~bulma/sass/components/tabs'
|
||||
@import '~bulma/sass/elements/notification'
|
||||
@import 'nav'
|
||||
@import 'content'
|
||||
@import 'message'
|
||||
@import 'label'
|
||||
@import 'charts'
|
||||
@import 'helper'
|
||||
|
||||
|
|
|
|||
|
|
@ -30,12 +30,6 @@
|
|||
height: 320px
|
||||
background-color: $white
|
||||
|
||||
.bar
|
||||
fill: rgba($blue, 0.91)
|
||||
|
||||
&:hover
|
||||
fill: lighten($blue, 10)
|
||||
|
||||
.axis text
|
||||
fill: $text
|
||||
font: 10px sans-serif
|
||||
|
|
|
|||
|
|
@ -1,46 +1,21 @@
|
|||
.content
|
||||
background: transparent
|
||||
margin: 40px 0
|
||||
margin: 2rem 0
|
||||
|
||||
.subtitle
|
||||
font-size: 15px
|
||||
text-transform: uppercase
|
||||
color: $black
|
||||
font-size: 0.9rem
|
||||
font-weight: $weight-bold
|
||||
text-transform: uppercase
|
||||
margin: 10px 0 0 0
|
||||
|
||||
.list-title
|
||||
color: $text-dark
|
||||
weight: $weight-semibold
|
||||
margin: 5px 0 0 0
|
||||
|
||||
.list-item
|
||||
width: 100%
|
||||
display: block
|
||||
align-items: center
|
||||
font-size: 12px
|
||||
padding: 6px 10px
|
||||
border-top: 1px solid $border-light
|
||||
|
||||
.columns
|
||||
|
||||
.column
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
.icon
|
||||
width: 22px
|
||||
height: 22px
|
||||
display: block
|
||||
float: left
|
||||
margin-right: 10px
|
||||
.subtitle-name
|
||||
padding-left: 0.5rem
|
||||
|
||||
.content-item
|
||||
background: $white
|
||||
border: 1px solid $border-secondary
|
||||
margin: 10px 0
|
||||
border-radius: 4px
|
||||
border-radius: $traefik-border-radius
|
||||
box-shadow: 1px 2px 5px rgba($border, 0.4)
|
||||
|
||||
h2
|
||||
|
|
@ -82,7 +57,7 @@
|
|||
|
||||
img
|
||||
width: 40px
|
||||
heught: 40px
|
||||
height: 40px
|
||||
display: block
|
||||
float: left
|
||||
margin-right: 10px
|
||||
|
|
@ -106,37 +81,27 @@
|
|||
margin: 15px auto
|
||||
|
||||
.search-container
|
||||
height: 50px
|
||||
background: $white
|
||||
border-radius: 4px
|
||||
color: $black
|
||||
margin: 10px 0
|
||||
display: flex
|
||||
align-items: center
|
||||
position: relative
|
||||
border-radius: $traefik-border-radius
|
||||
box-shadow: 1px 2px 5px rgba($border, 0.4)
|
||||
border: 1px solid $border-secondary
|
||||
position: relative
|
||||
height: 3rem
|
||||
|
||||
.icon
|
||||
.search-button
|
||||
position: absolute
|
||||
left: 10px
|
||||
top: 13px
|
||||
left: 1rem
|
||||
top: 0.8rem
|
||||
|
||||
input
|
||||
font-size: 16px
|
||||
color: $text
|
||||
width: 100%
|
||||
height: 48px
|
||||
padding-left: 50px
|
||||
border: none
|
||||
border-radius: $traefik-border-radius
|
||||
outline: none
|
||||
font-size: 1rem
|
||||
font-weight: $weight-light
|
||||
border-radius: 4px
|
||||
|
||||
.notification
|
||||
background: $white
|
||||
border-radius: 4px
|
||||
color: $text
|
||||
font-size: 16px
|
||||
box-shadow: 1px 2px 5px rgba($border, 0.4)
|
||||
border: 1px solid $border-secondary
|
||||
width: 100%
|
||||
padding-left: 2.8rem
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
.label
|
||||
padding: 5px 10px
|
||||
background: $white
|
||||
color: $color
|
||||
font-size: 12px
|
||||
font-family: $weight-semibold
|
||||
width: 100%
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
border: 1px solid $border
|
||||
background: linear-gradient(0deg, #F2F4F7 0%, #FFFFFF 100%)
|
||||
|
||||
&.green
|
||||
background: $green-secondary
|
||||
|
||||
&.red
|
||||
background: $red-secondary
|
||||
|
||||
&.yellow
|
||||
background: $yellow-secondary
|
||||
|
||||
&.blue
|
||||
background: $blue-secondary
|
||||
|
||||
span
|
||||
display: inline-flex
|
||||
float: left
|
||||
align-items: center
|
||||
|
|
@ -1,89 +1,65 @@
|
|||
.message
|
||||
display: block
|
||||
font-size: 14px
|
||||
margin: 20px 0 30px 0
|
||||
font-size: 0.8rem
|
||||
margin: 1rem 0 1.5rem 0
|
||||
padding-bottom: 0.3rem
|
||||
border: 1px solid $border
|
||||
background: $white
|
||||
border-radius: 4px
|
||||
border-radius: $traefik-border-radius
|
||||
box-shadow: 1px 2px 5px rgba($border, 0.4)
|
||||
|
||||
.message-header
|
||||
color: $color-secondary
|
||||
border-bottom: 1px solid $border-secondary
|
||||
padding: 20px 10px
|
||||
background: #f8f9fa
|
||||
border-top-left-radius: 4px
|
||||
border-top-right-radius: 4px
|
||||
padding: 0.6rem
|
||||
border-top-left-radius: $traefik-border-radius
|
||||
border-top-right-radius: $traefik-border-radius
|
||||
|
||||
.icon
|
||||
display: block
|
||||
float: left
|
||||
width: 1.4rem
|
||||
height: 1.4rem
|
||||
margin-right: 0.5rem
|
||||
|
||||
h2
|
||||
font-size: 14px
|
||||
weight: $weight-bold
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
|
||||
&.red
|
||||
background: rgba($red-secondary, 0.4)
|
||||
border-bottom: 1px solid $red-secondary
|
||||
color: $red-secondary
|
||||
|
||||
p
|
||||
color: $red-secondary
|
||||
|
||||
&.green
|
||||
background-color: rgba($green-secondary, 0.4)
|
||||
border-bottom: 1px solid $green-secondary
|
||||
color: $green-secondary
|
||||
|
||||
p
|
||||
color: darken($green-secondary, 10) !important
|
||||
|
||||
&.orange
|
||||
background-color: rgba($orange-secondary, 0.4)
|
||||
border-bottom: 1px solid $orange-secondary
|
||||
color: $orange-secondary
|
||||
|
||||
p
|
||||
color: $orange-secondary
|
||||
|
||||
&.blue
|
||||
background-color: rgba($blue-background, 0.4)
|
||||
border-bottom: 1px solid $blue-background
|
||||
color: $blue-background
|
||||
|
||||
p
|
||||
color: $blue-background !important
|
||||
|
||||
img
|
||||
margin-right: 15px
|
||||
|
||||
.message-body
|
||||
|
||||
.field
|
||||
margin: 5px 10px
|
||||
padding-bottom: 10px
|
||||
.tabs
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
.tags-list
|
||||
margin: 5px 10px
|
||||
.section-container
|
||||
padding: 0.3em 0 0 0
|
||||
|
||||
.control
|
||||
width: 100%
|
||||
margin: 5px 0
|
||||
.section-line
|
||||
padding: 0 0.75em
|
||||
|
||||
.tags
|
||||
width: 100%
|
||||
.section-line-header
|
||||
padding: 0.2em 0 0 0
|
||||
|
||||
.tag
|
||||
width: 50%
|
||||
// required for small screen (without -> table overlapping)
|
||||
.table-fixed
|
||||
table-layout: fixed
|
||||
|
||||
// required for small screen (without -> table overlapping)
|
||||
.table-fixed-break
|
||||
table-layout: fixed
|
||||
word-wrap: break-word
|
||||
|
||||
.table-cell-limited
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
|
||||
.table-col-75
|
||||
width: 75%
|
||||
|
||||
h2
|
||||
margin: 10px 10px 0 10px
|
||||
color: $black
|
||||
|
||||
hr
|
||||
margin: 5px 0
|
||||
|
||||
.message-subheader
|
||||
border-bottom: 1px solid $border-secondary
|
||||
padding: 10px
|
||||
margin-bottom: 5px
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,12 @@
|
|||
.navbar
|
||||
border-bottom: 1px solid $border
|
||||
box-shadow: 1px 2px 5px rgba($border, 0.4)
|
||||
height: 60px
|
||||
|
||||
.navbar-item
|
||||
font-size: 13px
|
||||
font-size: 0.8rem
|
||||
text-transform: uppercase
|
||||
font-weight: $weight-semibold
|
||||
|
||||
.navbar-logo
|
||||
width: 40px
|
||||
min-height: 40px
|
||||
|
||||
&:hover
|
||||
background: transparent
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
=font-face($family, $path, $weight: normal, $style: normal)
|
||||
@font-face
|
||||
font-family: $family
|
||||
src: url('#{$path}.ttf') format('truetype')
|
||||
src: url('./#{$path}.ttf') format('truetype')
|
||||
font-weight: $weight
|
||||
font-style: $style
|
||||
|
||||
+font-face('Open Sans', '/assets/fonts/OpenSans-Light', 300, 'light')
|
||||
+font-face('Open Sans', '/assets/fonts/OpenSans-Regular', 400, 'regular')
|
||||
+font-face('Open Sans', '/assets/fonts/OpenSans-Semibold', 600, 'semibold')
|
||||
+font-face('Open Sans', '/assets/fonts/OpenSans-Bold', 700, 'bold')
|
||||
+font-face('Open Sans', '/assets/fonts/OpenSans-ExtraBold', 800, 'extrabold')
|
||||
+font-face('Open Sans', 'assets/fonts/OpenSans-Light', 300, 'light')
|
||||
+font-face('Open Sans', 'assets/fonts/OpenSans-Regular', 400, 'regular')
|
||||
+font-face('Open Sans', 'assets/fonts/OpenSans-Semibold', 600, 'semibold')
|
||||
+font-face('Open Sans', 'assets/fonts/OpenSans-Bold', 700, 'bold')
|
||||
+font-face('Open Sans', 'assets/fonts/OpenSans-ExtraBold', 800, 'extrabold')
|
||||
|
||||
$open-sans: 'Open Sans', sans-serif
|
||||
|
|
|
|||
1
webui/src/styles/variables.sass
Normal file
1
webui/src/styles/variables.sass
Normal file
|
|
@ -0,0 +1 @@
|
|||
$traefik-border-radius: 4px
|
||||
Loading…
Add table
Add a link
Reference in a new issue