From 6f01b654d3ab33d95a6f452fa82ca5164fd21939 Mon Sep 17 00:00:00 2001 From: Eduard Urbach Date: Wed, 28 Feb 2018 12:48:57 +0100 Subject: [PATCH] CSS cleanup --- config.json | 2 +- layout/sidebar/sidebar.scarlet | 4 ++ styles/embedded.scarlet | 12 +--- styles/include/config.scarlet | 12 +--- styles/navigation.scarlet | 112 --------------------------------- styles/search.scarlet | 9 +++ 6 files changed, 16 insertions(+), 135 deletions(-) delete mode 100644 styles/navigation.scarlet create mode 100644 styles/search.scarlet diff --git a/config.json b/config.json index f4ceef6f..4254a78c 100644 --- a/config.json +++ b/config.json @@ -13,7 +13,7 @@ "typography", "mountable", "layout", - "navigation", + "search", "headers", "input", "grid", diff --git a/layout/sidebar/sidebar.scarlet b/layout/sidebar/sidebar.scarlet index bb8924d0..46c4fcf7 100644 --- a/layout/sidebar/sidebar.scarlet +++ b/layout/sidebar/sidebar.scarlet @@ -75,6 +75,10 @@ sidebar-spacing-y = 0.7rem padding 0.5rem color text-color + :hover + color text-color + background reverse-light-hover-color + :active transform translateY(-50%) translateY(3px) diff --git a/styles/embedded.scarlet b/styles/embedded.scarlet index c0b8aef4..76f21930 100644 --- a/styles/embedded.scarlet +++ b/styles/embedded.scarlet @@ -4,24 +4,14 @@ remove-margin = 1.1rem // Put navigation to the bottom of the screen flex-direction column-reverse !important - // .extension-navigation - // display inline-block - .anime-list - // max-width 500px margin-left calc(remove-margin * -1) margin-top calc(remove-margin * -1) width calc(100% + remove-margin * 2) - // td - // padding 0.4rem 0.8rem - .anime-list-owner display none .anime-list-item-image, .anime-list-item-image-container - width 27px - - #navigation - font-size 0.9rem \ No newline at end of file + width 27px \ No newline at end of file diff --git a/styles/include/config.scarlet b/styles/include/config.scarlet index 0e8b60da..8e115078 100644 --- a/styles/include/config.scarlet +++ b/styles/include/config.scarlet @@ -50,15 +50,6 @@ post-highlight-color = rgba(248, 165, 130, 0.7) // Avatar avatar-size = 50px -// Navigation -nav-color = text-color -nav-link-color = rgba(255, 255, 255, 0.5) -nav-link-hover-color = white -nav-link-hover-slide-color = main-color -// nav-color = rgb(245, 245, 245) -// nav-link-color = rgb(160, 160, 160) -// nav-link-hover-color = rgb(80, 80, 80) - // Quote quote-color = hsl(0, 0%, 45%) quote-side-border-color = quote-color @@ -76,7 +67,7 @@ anime-list-item-name-color = link-color table-width-normal = 900px // Loading animation -loading-anim-color = nav-link-hover-slide-color +loading-anim-color = main-color // Shadow shadow-light = 4px 4px 8px rgba(0, 0, 0, 0.05) @@ -91,7 +82,6 @@ outline-shadow-heavy = 0 0 6px rgba(0, 0, 0, 0.6) content-padding = 1.6rem content-padding-top = 1.6rem content-line-height = 1.7em -hover-line-size = 3px typography-margin = 0.4rem // Timings diff --git a/styles/navigation.scarlet b/styles/navigation.scarlet deleted file mode 100644 index 4afc17bf..00000000 --- a/styles/navigation.scarlet +++ /dev/null @@ -1,112 +0,0 @@ -#navigation - horizontal - overflow hidden - background-color nav-color - justify-content center - // border-bottom ui-border - -.navigation-link - color nav-link-color - - :after - content "" - display block - height hover-line-size - background-color nav-link-hover-slide-color - transform scaleX(0) - opacity 0 - default-transition - - :hover, - &.active - color nav-link-hover-color - cursor pointer - :after - transform scaleX(1.0) - opacity 1 - - &.active - // text-shadow 1px 1px 3px rgba(4, 4, 4, 0.5) - text-shadow 1px 1px 3px rgba(4, 4, 4, 0.1) - -.navigation-button - horizontal - font-size 1em - line-height 1em - padding 0.75em 1em - - .icon - margin-right 0 - -.navigation-text - display none - -#search - background transparent - border none !important - box-shadow none !important - font-size 1em - padding 0 - width 0 - height auto - flex-grow 1 - -// #search -// flex 1 -// border-radius 0 -// background transparent -// border none - -// color nav-link-hover-color -// font-size 1em -// min-width 0 - -// ::placeholder -// color nav-link-color - -// :focus -// border none -// box-shadow none - -// .extra-navigation -// display none - -// .extension-navigation -// display none - -// > 330px -// .navigation-button, #search -// font-size 1.3em - -// > 550px -// #navigation -// padding 0 content-padding - -// > 930px -// .navigation-button, #search -// font-size 1.2em - -// #navigation -// justify-content flex-start - -// .extra-navigation -// display block - -// @media screen and (max-device-height: 500px) -// #navigation -// vertical -// height 100% -// padding content-padding 0 - -// #container -// horizontal - -// .extra-navigation -// display block - -// #sidebar-toggle, -// .hide-landscape -// display none !important - -// #search -// display none \ No newline at end of file diff --git a/styles/search.scarlet b/styles/search.scarlet new file mode 100644 index 00000000..30aac5af --- /dev/null +++ b/styles/search.scarlet @@ -0,0 +1,9 @@ +#search + background transparent + border none !important + box-shadow none !important + font-size 1em + padding 0 + width 0 + height auto + flex-grow 1 \ No newline at end of file