diff --git a/resources/app/stylesheets/app.less b/resources/app/stylesheets/app.less index 7f1ca3a..d053c9a 100644 --- a/resources/app/stylesheets/app.less +++ b/resources/app/stylesheets/app.less @@ -4,7 +4,10 @@ @border-stack: 1px solid @ci-color; @text-padding-v: .2rem; @text-padding-h: 1rem; -@accent-border-width: 1rem; +@accent-border-width: .3rem; +@accent-border: @accent-border-width solid @ci-color; +@element-margin: .6rem; +@element-background: #F0F0F0; body { font-family: sans-serif; @@ -33,6 +36,13 @@ h2 { border: @border-stack; } +.accent-border-element { + border-left: @accent-border; + background-color: @element-background; + margin: @element-margin; + padding: 1rem; +} + .grid { display: grid; grid-template-columns: 20% 70% 10%; @@ -43,14 +53,15 @@ h2 { margin: auto; min-width: 900px; width: 80%; - border-top: ; nav { grid-area: nav; + .accent-border-element; } main { grid-area: main; + .accent-border-element; .schema-title__name { font-weight: normal; @@ -59,14 +70,15 @@ h2 { aside { grid-area: sidebar; + .accent-border-element; } footer { grid-area: footer; + .accent-border-element; } header, footer, main, nav, aside { - border-bottom: @border-stack; padding: @text-padding-v @text-padding-h; } @@ -75,8 +87,7 @@ h2 { display: grid; grid-template-columns: 40% 60%; align-items: center; - border-top: @border-stack; - border-left: @accent-border-width solid @ci-color; + .accent-border-element; .app-title { grid-column: 1; @@ -96,8 +107,16 @@ h2 { .header-content__link { display: inline-block; - padding: @text-padding-v @text-padding-h / 2; + padding: @text-padding-v * 2 @text-padding-h; margin-right: @accent-border-width; + background-color: #E0E0E0; + border: 0; + border-bottom: .3rem solid @ci-color; + cursor: pointer; + + &:hover { + background-color: darken(#E0E0E0, 3%); + } } } }