X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/85db812feaae5f36ea6214931cec4adb67a9cb39..refs/pull/3433/head:/resources/sass/_blocks.scss diff --git a/resources/sass/_blocks.scss b/resources/sass/_blocks.scss index 1ee4e0709..0398224ca 100644 --- a/resources/sass/_blocks.scss +++ b/resources/sass/_blocks.scss @@ -66,7 +66,6 @@ @include lightDark(background-color, #FFF, #222); box-shadow: $bs-card; border-radius: 3px; - border: 1px solid transparent; .body, p.empty-text { padding: $-m; } @@ -87,6 +86,20 @@ .card-title a { line-height: 1; } +.card-footer-link { + display: block; + padding: $-s $-m; + line-height: 1; + border-top: 1px solid; + @include lightDark(border-color, #DDD, #555); + border-radius: 0 0 3px 3px; + font-size: 0.9em; + margin-top: $-xs; + &:hover { + text-decoration: none; + @include lightDark(background-color, #f2f2f2, #2d2d2d); + } +} .card.border-card { border: 1px solid #DDD; @@ -190,7 +203,7 @@ padding: $-m $-xxl; margin-inline-start: auto; margin-inline-end: auto; - margin-bottom: $-xl; + margin-bottom: $-l; overflow: initial; min-height: 60vh; &.auto-height { @@ -216,6 +229,24 @@ } } +.outline-hover { + border: 1px solid transparent !important; + &:hover { + border: 1px solid rgba(0, 0, 0, 0.1) !important; + } +} + +.fade-in-when-active { + @include lightDark(opacity, 0.6, 0.7); + transition: opacity ease-in-out 120ms; + &:hover, &:focus-within { + opacity: 1 !important; + } + @media (prefers-contrast: more) { + opacity: 1 !important; + } +} + /** * Tags */ @@ -230,7 +261,7 @@ @include lightDark(border-color, #CCC, #666); a, span, a:hover, a:active { padding: 4px 8px; - @include lightDark(color, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.8)); + @include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8)); transition: background-color ease-in-out 80ms; text-decoration: none; } @@ -247,10 +278,43 @@ } } +.tag-name.highlight, .tag-value.highlight { + font-weight: bold; +} + .tag-list div:last-child .tag-item { margin-bottom: 0; } +td .tag-item { + margin-bottom: 0; +} + +/** + * Pill boxes + */ + +.pill { + display: inline-block; + border: 1px solid currentColor; + padding: .2em .8em; + font-size: 0.8em; + border-radius: 1rem; + position: relative; + overflow: hidden; + line-height: 1.4; + &:before { + content: ''; + background-color: currentColor; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0.1; + } +} + /** * API Docs */