diff --git a/docs/logo.svg b/docs/logo.svg index 44c8b71850ce..472d0d6025fc 100644 --- a/docs/logo.svg +++ b/docs/logo.svg @@ -1,30 +1,16 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + diff --git a/scaladoc-js/resources/scaladoc-searchbar.css b/scaladoc-js/resources/scaladoc-searchbar.css index 3c89dd9e6ebe..fded722670b3 100644 --- a/scaladoc-js/resources/scaladoc-searchbar.css +++ b/scaladoc-js/resources/scaladoc-searchbar.css @@ -1,15 +1,15 @@ /* button */ .search span { - background: #ED3522; - fill: #fff; + background: var(--red500); + fill: var(--white); cursor: pointer; border: none; padding: 9px; border-radius: 24px; - box-shadow: 0 0 16px #F27264; + box-shadow: 0 0 16px var(--code-bg); } .search span:hover { - fill: #F27264; + background: var(--red600); } @media(max-width: 576px) { @@ -29,7 +29,7 @@ } #scaladoc-search { - margin-top: 10px; + margin-top: 16px; cursor: pointer; position: fixed; top: 0; @@ -65,7 +65,7 @@ } #scaladoc-searchbar-results { - background: white; + background: var(--white); display: flex; flex-direction: column; max-height: 500px; @@ -73,7 +73,7 @@ } .scaladoc-searchbar-result { - background: white; + background: var(--white); line-height: 24px; display: flex; padding: 4px 10px 4px 10px; @@ -90,11 +90,11 @@ } .scaladoc-searchbar-result[selected] { - background-color: #d4edff; + background-color: var(--blue100); } .scaladoc-searchbar-result a { - color: #1f2326; + color: var(--grey900); /* for some reason, with display:block if there's a wrap between the * search result text and the location span, the dead space to the * left of the location span doesn't get treated as part of the block, @@ -134,7 +134,7 @@ background-size: 50% 2px, 2px 50%; background-repeat: no-repeat; border-radius: 12px; - box-shadow: 0 0 2px black; + box-shadow: 0 0 2px var(--black); } .snippet-comment-button:hover { diff --git a/scaladoc/resources/dotty_res/styles/colors.css b/scaladoc/resources/dotty_res/styles/colors.css new file mode 100644 index 000000000000..d16fb6109a32 --- /dev/null +++ b/scaladoc/resources/dotty_res/styles/colors.css @@ -0,0 +1,124 @@ +:root { + /* White */ + --white: hsl(193, 24%, 99%); + + /* Black */ + --black: hsl(200, 72%, 6%); + + /* Grey */ + --grey100: hsl(193, 24%, 97%); + --grey200: hsl(193, 20%, 95%); + --grey300: hsl(193, 16%, 86%); + --grey400: hsl(193, 16%, 74%); + --grey500: hsl(193, 16%, 66%); + --grey600: hsl(193, 14%, 52%); + --grey700: hsl(193, 14%, 42%); + --grey800: hsl(193, 12%, 28%); + --grey900: hsl(193, 12%, 16%); + + /* Blue */ + --blue100: hsl(200, 64%, 92%); + --blue200: hsl(200, 66%, 82%); + --blue300: hsl(200, 68%, 70%); + --blue400: hsl(200, 62%, 58%); + --blue500: hsl(200, 72%, 42%); + --blue600: hsl(200, 71%, 24%); + --blue700: hsl(200, 72%, 18%); + --blue800: hsl(200, 72%, 12%); + --blue900: hsl(200, 72%, 8%); + + /* Red */ + --red500: hsl(1 , 60% , 92%); + --red500: hsl(1 , 64% , 84%); + --red500: hsl(1 , 66% , 72%); + --red500: hsl(1 , 66% , 64%); + --red500: hsl(1 , 71% , 52%); + --red600: hsl(1 , 71% , 40%); + --red700: hsl(1 , 72% , 32%); + --red800: hsl(1 , 72% , 24%); + --red900: hsl(1 , 75% , 12%); + + + /* Light Mode */ + --border-light: var(--grey200); + --border-medium: var(--grey300); + + --body-bg: var(--white); + --body-fg: var(--grey900); + --title-fg: var(--grey800); + + --active-bg: var(--blue300); + --active-bg-shadow: var(--blue400); + --active-fg: var(--grey900); + + --inactive-bg: var(--grey400); + --inactive-bg-shadow: var(--grey700); + --inactive-fg: var(--grey700); + + --code-bg: var(--grey200); + --code-fg: var(--grey800); + --symbol-fg: var(--grey900); + --documentable-bg: var(--grey200); + + --link-fg: var(--blue500); + --link-hover-fg: var(--blue600); + --link-sig-fg: var(--blue500); + + --leftbar-bg: var(--grey100); + --leftbar-fg: var(--grey900); + --leftbar-current-bg: var(--blue100); + --leftbar-current-fg: var(--blue500); + --leftbar-hover-bg: var(--blue100); + --leftbar-hover-fg: var(--grey900); + + --footer-bg: var(--white); + --footer-fg: var(--grey700); + + --icon-color: var(--grey400); + --selected-fg: var(--blue900); + --selected-bg: var(--blue200); +} + + /* Dark Mode */ +:root.theme-dark { + --border-light: var(--blue800); + --border-medium: var(--blue700); + + --body-bg: var(--blue900); + --body-fg: var(--grey300); + --title-fg: var(--blue200); + + --active-bg: var(--blue500); + --active-bg-shadow: var(--blue400); + --active-fg: var(--grey300); + + --inactive-bg: var(--grey800); + --inactive-bg-shadow: var(--grey600); + --inactive-fg: var(--grey600); + + --code-bg: var(--blue800); + --code-fg: var(--grey400); + --symbol-fg: var(--grey300); + --documentable-bg: var(--blue800); + + --link-fg: var(--blue400); + --link-hover-fg: var(--blue300); + --link-sig-fg: var(--blue400); + + --leftbar-bg: var(--black); + --leftbar-fg: var(--grey300); + --leftbar-current-bg: var(--blue700); + --leftbar-current-fg: var(--white); + --leftbar-hover-bg: var(--blue800); + --leftbar-hover-fg: var(--grey300); + + --footer-bg: var(--blue900); + --footer-fg: var(--grey400); + + --icon-color: var(--grey600); + --selected-fg: var(--blue800); + --selected-bg: var(--blue200); + + --tab-selected: var(--white); + --tab-default: var(--grey300); +} diff --git a/scaladoc/resources/dotty_res/styles/diagram.css b/scaladoc/resources/dotty_res/styles/diagram.css index 1960ad9dcba7..81b01b217ed5 100644 --- a/scaladoc/resources/dotty_res/styles/diagram.css +++ b/scaladoc/resources/dotty_res/styles/diagram.css @@ -19,6 +19,11 @@ height: 400px; } +.diagram-class { + background-color: var(--code-bg); + margin-bottom: 16px; +} + .diagram-class a { text-decoration: underline; color: #FFF; diff --git a/scaladoc/resources/dotty_res/styles/filter-bar.css b/scaladoc/resources/dotty_res/styles/filter-bar.css index 5a73a87e673d..28ec8d305db8 100644 --- a/scaladoc/resources/dotty_res/styles/filter-bar.css +++ b/scaladoc/resources/dotty_res/styles/filter-bar.css @@ -1,5 +1,5 @@ .documentableFilter { - padding: 24px 12px; + padding: 24px 24px 24px 12px; background-color: var(--code-bg); } @@ -26,22 +26,28 @@ } .filterToggleButton svg { - fill: var(--body-fg); + fill: var(--icon-color); transition: fill 0.1s ease-in, transform 0.1s ease-in-out; } .filterToggleButton:hover svg, .filterToggleButton:focus svg { - fill: var(--active-fg); + fill: var(--icon-color); } .filterableInput { - padding: 6px 4px; flex: 1; outline: 0; - border: 0; + border: 1px solid var(--border-medium); border-radius: 3px; background-color: var(--body-bg); + font-family: "Lato", sans-serif; + padding: 8px; + margin-left: 8px; +} + +.filterableInput:focus { + border: 1px solid var(--active-bg-shadow); } .filterLowerContainer { diff --git a/scaladoc/resources/dotty_res/styles/scalastyle.css b/scaladoc/resources/dotty_res/styles/scalastyle.css index 47404a1d40b3..90682b0faa0d 100644 --- a/scaladoc/resources/dotty_res/styles/scalastyle.css +++ b/scaladoc/resources/dotty_res/styles/scalastyle.css @@ -1,96 +1,18 @@ -@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Lato:wght@400;700&family=Roboto+Slab:wght@700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Lato:wght@400;700&family=Roboto+Slab:wght@400;700&display=swap'); +@import 'colors.css'; :root { - /* Color Settings */ - --border-light: #DADFE6; - --border-medium: #abc; - - --body-bg: #eee; - --body-fg: #333; - --title-fg: hsl(200, 80%, 30%); - - --active-bg: var(--leftbar-current-bg); - --active-bg-shadow: hsl(200, 38%, 50%); - --active-fg: var(--body-fg); - - --inactive-bg: #bbb; - --inactive-bg-shadow: var(--inactive-fg); - --inactive-fg: #777; - - --code-bg: hsl(200, 10%, 90%); - --code-fg: #4C566A; - --symbol-fg: var(--body-fg); - --documentable-bg: var(--code-bg); - - --link-fg: #00607D; - --link-hover-fg: #00A0D0; - - --link-sig-fg: var(--link-fg); - - --leftbar-bg: hsl(200, 65%, 75%); - --leftbar-fg: #333; - --leftbar-current-bg: hsl(200, 80%, 65%); - --leftbar-current-fg: #fff; - --leftbar-hover-bg: hsl(200, 65%, 65%); - --leftbar-hover-fg: #333; - - --footer-bg: #FFF; - - --icon-color: #00485E; - --selected-fg: #00303E; - --selected-bg: #BFE7F3; - /* Font Settings */ --mono-font: "Fira Code", monospace; --text-font: "Lato", sans-serif; --title-font: "Roboto Slab", serif; - --leftbar-font-size: 15px; + --leftbar-font-size: 14px; /* Layout Settings (changes on small screens) */ - --side-width: 255px; + --side-width: 300px; --content-padding: 24px 42px; --footer-height: 42px; } -:root.theme-dark { - /* Color Settings */ - --border-light: #DADFE6; - --border-medium: #abc; - - --body-bg: hsl(200, 100%, 3%); - --body-fg: #CCC; - --title-fg: hsl(200, 50%, 80%); - - --active-bg: hsl(200, 80%, 25%); - --active-bg-shadow: hsl(200, 38%, 50%); - --active-fg: var(--body-fg); - - --inactive-bg: #444; - --inactive-bg-shadow: var(--inactive-fg); - --inactive-fg: #777; - - --code-bg: hsl(200, 30%, 10%); - --code-fg: #bfbfbf; - --symbol-fg: var(--body-fg); - --link-fg: hsl(200, 100%, 70%); - --link-hover-fg: #00A0D0; - - --link-sig-fg: #2da0d1; - - --leftbar-bg: hsl(200, 100%, 14%); - --leftbar-fg: #CCC; - --leftbar-current-bg: hsl(200, 100%, 35%); - --leftbar-current-fg: #FFF; - --leftbar-hover-bg: hsl(200, 80%, 25%); - --leftbar-hover-fg: #CCC; - - --footer-bg: var(--body-bg); - --footer-fg: var(--body-fg); - - --icon-color: #00485E; - --selected-fg: #00303E; - --selected-bg: #BFE7F3; - -} body { margin: 0; @@ -130,11 +52,13 @@ main { h1, h2, h3 { font-family: var(--title-font); color: var(--title-fg); + font-weight: normal; } .monospace { font-family: var(--mono-font); background: var(--documentable-bg); font-variant-ligatures: none; + /* padding: 8px; */ } pre, code, .hljs { font-family: var(--mono-font); @@ -233,13 +157,13 @@ th { } #logo>span { display: inline-block; - padding: 8px 8px 8px 8px; vertical-align: middle; } -#logo img { - max-height: 54px; - max-width: 54px; +#logo>span>img { + max-height: 40px; + max-width: 40px; + padding: 16px 8px 8px 16px; cursor: pointer; } @@ -247,35 +171,42 @@ th { color: var(--leftbar-fg); font-size: 28px; font-weight: bold; + padding: 4px 0px 0px 4px; } #logo .projectVersion { - color: var(--leftbar-fg); + color: var(--grey600); font-size: 12px; display: flex; - padding-left: calc(0.05 * var(--side-width)); + padding-left: 2px; padding-right: calc(0.08 * var(--side-width)); } .scaladoc_logo { width: 116px; + margin-left: -16px; } /* Navigation */ #sideMenu2 { overflow: auto; overflow-x: hidden; - scrollbar-width: thin; height: 100%; font-size: var(--leftbar-font-size); - margin-top: 5%; + margin-top: 8px; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; +} + +#sideMenu2::-webkit-scrollbar { + display: none; } /* divs in sidebar represent entry and its children */ #sideMenu2 div { - padding-left: 0.7em; position: relative; display: none; + padding-left: 0.8em; } #sideMenu2 div.expanded { @@ -309,12 +240,13 @@ th { flex: 1; overflow-wrap: anywhere; color: var(--leftbar-fg); + width: calc(2 * var(--side-width)); margin-right: .5rem; + margin-left: calc(0px - var(--side-width)); padding-top: 2%; padding-bottom: 2%; - width: calc(var(--side-width)); - padding-left: calc(0.05 * var(--side-width)); - padding-right: calc(0.3 * var(--side-width)); + padding-left: calc(1.015 * var(--side-width)); + padding-right: calc(0.15 * var(--side-width)); box-sizing: border-box; } @@ -344,15 +276,15 @@ span.ar { align-items: center; cursor: pointer; position: absolute; - right: 1em; - top: 0px; + right: 0.6em; + top: calc(0.01 * var(--side-width)); } span.ar::before { content: "\e903"; /* arrow down */ font-family: "dotty-icons" !important; font-size: 20px; - color: var(--leftbar-fg); + color: var(--icon-color); display: flex; flex-direction: row; align-items: center; @@ -380,13 +312,13 @@ span.ar::before { background: transparent; padding: 0 6px 4px 6px; margin: 1rem 1rem 0 0; - border-bottom: 1px solid grey; + border-bottom: 1px solid var(--border-light); cursor: pointer; } .section-tab[data-active=""] { color: unset; font-weight: bold; - border-bottom: 2px solid var(--active-bg); + border-bottom: 1px solid var(--active-bg); } .tabs-section-body > :not([data-active]) { display: none; @@ -501,7 +433,7 @@ dl.attributes > dt.implicit { } dl.attributes > dd { display: block; - padding-left: 6em; + padding-left: 4em; margin-bottom: 5px; min-height: 15px; } @@ -557,6 +489,7 @@ footer { width: calc(100% - var(--side-width)); min-height: var(--footer-height); border-top: 1px solid var(--border-light); + font-size: 14px; } .theme-dark footer img { /* "Poor man's dark mode" for images. @@ -573,6 +506,11 @@ footer .pull-right { margin-left: auto; } +footer .mode { + display: flex; + align-items: center; +} + /* Theme Toggle */ .switch { /* The switch - the box around the slider */ @@ -580,8 +518,7 @@ footer .pull-right { display: inline-block; width: 60px; min-width: 60px; - height: 34px; - margin-bottom: 0; + height: 32px; } .switch input { /* Hide default HTML checkbox */ @@ -597,19 +534,19 @@ footer .pull-right { right: 0; bottom: 0; border-radius: 34px; - background-color: #ccc; + background-color: var(--border-medium); -webkit-transition: 0.4s; transition: 0.4s; } .switch .slider:before { position: absolute; content: "🌘"; - height: 40px; - width: 40px; - line-height:40px; - font-size:20px; + height: 28px; + width: 28px; + line-height:28px; + font-size:24px; text-align: center; - left: 0px; + left: 2px; bottom: 4px; top: 0; bottom: 0; @@ -617,21 +554,16 @@ footer .pull-right { margin: auto 0; -webkit-transition: 0.4s; transition: 0.4s; - box-shadow: 0 0px 15px #2020203d; - background: #555; + background: transparent; } .switch input:checked + .slider { - background-color: hsl(200, 80%, 65%); /* --active-bg, but not affected by the theme */ -} -.switch input:focus + .slider { - box-shadow: 0 0 1px #2196f3; + background-color: var(--blue100); /* --active-bg, but not affected by the theme */ } .switch input:checked + .slider:before { content: "🌞"; - -webkit-transform: translateX(24px); - -ms-transform: translateX(24px); - transform: translateX(24px); - background: white; + -webkit-transform: translateX(28px); + -ms-transform: translateX(28px); + transform: translateX(28px); } .documentableElement .modifiers { @@ -652,7 +584,7 @@ footer .pull-right { } .documentableElement .modifiers .other-modifiers { - color: gray; + color: var(--grey600); } .kind { @@ -674,6 +606,10 @@ footer .pull-right { white-space: pre-wrap; } +.signature.monospace { + padding: 8px; +} + .signature a, .signature a:visited, .signature span[data-unresolved-link] { color: var(--link-sig-fg); } @@ -683,17 +619,15 @@ footer .pull-right { } .documentableElement { - width: 100%; color: var(--symbol-fg); white-space: normal; position: relative; - margin: 0; - padding: 5px 4px 5px 4px; + padding: 8px; font-weight: 500; font-size: 12px; background: var(--documentable-bg); border-left: 0.25em solid transparent; - margin: 0.25em; + margin: 0.5em 0; } .documentableElement>div { @@ -735,7 +669,7 @@ footer .pull-right { border-left-color: var(--active-bg); } .documentableElement .annotations { - color: gray; + color: var(--grey600); display: none; } @@ -747,11 +681,19 @@ footer .pull-right { display: none; } -.documentableAnchor { +.documentableAnchor:before { + content: "\e901"; /* arrow down */ + font-family: "dotty-icons" !important; + transform: rotate(45deg); + font-size: 20px; + color: var(--icon-color); + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; position: absolute; - width: 24px; - height: 24px; - background: url('data:image/svg+xml;utf8, '); + top: 6px; + margin-left: 0.2em; } .memberDocumentation { @@ -766,16 +708,19 @@ footer .pull-right { border: none; outline: none; background: transparent; - padding: 0 6px 4px 6px; - margin: 1rem 1rem 0 0; - border-bottom: 1px solid grey; + color: var(--tab-default); + padding: 0 2px 8px 2px; + margin: 4em 1em 0 0; + border-bottom: 2px solid var(--border-medium); cursor: pointer; + font-size: 16px; + font-family: var(--text-font); } .tabs .names .tab.selected { - color: unset; + color: var(--tab-selected); font-weight: bold; - border-bottom: 2px solid var(--active-bg); + border-bottom: 2px solid var(--link-fg); } .tabs .names { @@ -804,8 +749,7 @@ footer .pull-right { .micon { box-sizing: content-box; - height: 5.7em; - width: 5.7em; + margin-right: 8px; color:transparent; } .theme-dark .micon { @@ -869,8 +813,7 @@ footer .pull-right { } #leftColumn .socials { - margin-left: 5%; - margin-right: 5%; + display: none; } footer .socials { @@ -878,6 +821,10 @@ footer .socials { align-items: center; } +.footer-text { + margin-right: 8px; +} + .social-icon { padding-right: 5px; padding-left: 5px; @@ -1055,3 +1002,13 @@ footer .socials { position: unset; } } + +/* Breadcrumbs */ + +.breadcrumbs a { + margin: 0 8px; +} + +.breadcrumbs a:first-child { + margin: 0 8px 0 0; +} \ No newline at end of file diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala index a5d297411dd9..22803ef924dd 100644 --- a/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala +++ b/scaladoc/src/dotty/tools/scaladoc/renderers/HtmlRenderer.scala @@ -259,20 +259,6 @@ class HtmlRenderer(rootPackage: Member, val members: Map[DRI, Member])(using ctx ) ), footer( - span(cls := "go-to-top-icon")( - a(href := "#container")( - span(cls:="icon-vertical_align_top"), - span(cls :="footer-text")(raw("Back to top")) - ) - ), - label(id := "theme-toggle", cls := "switch")( - input(`type` := "checkbox"), - span(cls := "slider") - ), - div(cls := "socials")( - span(cls := "footer-text")(if hasSocialLinks then Seq(raw("Social links")) else Nil), - socialLinks(whiteIcon = false) - ), div(id := "generated-by")( span(cls := "footer-text")(raw("Generated by")), a(href := "https://github.com/lampepfl/dotty/tree/master/scaladoc")( @@ -283,7 +269,24 @@ class HtmlRenderer(rootPackage: Member, val members: Map[DRI, Member])(using ctx ) ) ), - textFooter + textFooter, + div(cls := "socials")( + span(cls := "footer-text")(if hasSocialLinks then Seq(raw("Social links")) else Nil), + socialLinks(whiteIcon = false) + ), + div(cls := "mode")( + span(cls :="footer-text")(raw("Mode")), + label(id := "theme-toggle", cls := "switch")( + input(`type` := "checkbox"), + span(cls := "slider") + ) + ), + span(cls := "go-to-top-icon")( + a(href := "#container")( + span(cls:="icon-vertical_align_top"), + span(cls :="footer-text")(raw("Back to top")) + ) + ) ) ) ) diff --git a/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala b/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala index 8733693cdc4e..e170dda5394b 100644 --- a/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala +++ b/scaladoc/src/dotty/tools/scaladoc/renderers/Resources.scala @@ -60,6 +60,7 @@ trait Resources(using ctx: DocContext) extends Locations, Writer: val fromResources = List( "styles/nord-light.css", "styles/scalastyle.css", + "styles/colors.css", "styles/dotty-icons.css", "styles/diagram.css", "styles/filter-bar.css",