diff --git a/frontend/requirements.txt b/frontend/requirements.txt index a1e5d1de0..2a0884156 100644 --- a/frontend/requirements.txt +++ b/frontend/requirements.txt @@ -1,6 +1,5 @@ coverage==7.9.1 docutils==0.21.2 -furo==2024.8.6 graphviz==0.21 ipython==9.3.0 pdf2image==1.17.0 @@ -10,6 +9,7 @@ Pygments==2.19.2 pyparsing==3.2.3 Sphinx==8.2.3 sphinx-reredirects==1.0.0 +sphinx-rtd-theme==3.0.2 sphinxcontrib-bibtex==2.6.5 sphinxcontrib-plantuml==0.30 websocket-client==1.8.0 diff --git a/frontend/requirements_frozen.txt b/frontend/requirements_frozen.txt index a444e447c..30443b8c9 100644 --- a/frontend/requirements_frozen.txt +++ b/frontend/requirements_frozen.txt @@ -8,7 +8,6 @@ coverage==7.9.1 decorator==5.2.1 docutils==0.21.2 executing==2.2.0 -furo==2024.8.6 graphviz==0.21 idna==3.10 imagesize==1.4.1 @@ -36,15 +35,18 @@ PyYAML==6.0.2 requests==2.32.4 roman-numerals-py==3.1.0 setuptools==80.9.0 +six==1.17.0 snowballstemmer==3.0.1 soupsieve==2.7 Sphinx==8.2.3 sphinx-basic-ng==1.0.0b2 sphinx-reredirects==1.0.0 +sphinx-rtd-theme==3.0.2 sphinxcontrib-applehelp==2.0.0 sphinxcontrib-bibtex==2.6.5 sphinxcontrib-devhelp==2.0.0 sphinxcontrib-htmlhelp==2.1.0 +sphinxcontrib-jquery==4.1 sphinxcontrib-jsmath==1.0.1 sphinxcontrib-plantuml==0.30 sphinxcontrib-qthelp==2.0.0 diff --git a/frontend/sphinx/_templates/footer.html b/frontend/sphinx/_templates/footer.html new file mode 100644 index 000000000..8b154c0e7 --- /dev/null +++ b/frontend/sphinx/_templates/footer.html @@ -0,0 +1,75 @@ + diff --git a/frontend/sphinx/_templates/layout.html b/frontend/sphinx/_templates/layout.html new file mode 100644 index 000000000..e8796d72b --- /dev/null +++ b/frontend/sphinx/_templates/layout.html @@ -0,0 +1,43 @@ +{% extends "!layout.html" %} + +{%- block extrahead %} + {% include "analytics.html" %} + {% include "metatags.html" %} +{% endblock %} + +{% block extrabody %} + + + + + + +{% endblock %} + +{%- block mobile_nav %} + + {%- if logo and theme_logo_only %} + + {%- else %} + {{ project }} + {%- endif %} + + {%- if logo %} + {#- Not strictly valid HTML, but it's the only way to display/scale + it properly, without weird scripting or heaps of work + #} + + {%- endif %} + +{%- endblock %} + +{% block footer %} + + + +{% endblock %} diff --git a/frontend/sphinx/conf.py b/frontend/sphinx/conf.py index 5c1263cf2..f304d5150 100644 --- a/frontend/sphinx/conf.py +++ b/frontend/sphinx/conf.py @@ -104,6 +104,7 @@ def get_file_from_conf_ini(path_to_file): 'sphinx.ext.graphviz', 'sphinx.ext.extlinks', 'widget_extension', + 'sphinx_rtd_theme', 'sphinx_reredirects', 'sphinxcontrib.plantuml', ] @@ -182,7 +183,6 @@ def get_file_from_conf_ini(path_to_file): # The name of the Pygments (syntax highlighting) style to use. pygments_style = 'sphinx' -pygments_dark_style = "monokai" nitpicky = True @@ -232,7 +232,8 @@ def get_file_from_conf_ini(path_to_file): # The theme to use for HTML and HTML Help pages. See the documentation for # a list of builtin themes. # -html_theme = 'furo' +#html_theme = 'learn_theme' +html_theme = 'sphinx_rtd_theme' if 'GEN_LEARN_SITE' in os.environ and os.environ['GEN_LEARN_SITE'] == "yes": html_title = "learn.adacore.com" @@ -244,32 +245,24 @@ def get_file_from_conf_ini(path_to_file): html_theme_path = ['.'] # make sphinx search for themes in current dir -html_css_files = [ - "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/fontawesome.min.css", - "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/solid.min.css", - "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/brands.min.css", -] - # Theme options are theme-specific and customize the look and feel of a theme # further. For a list of options available for each theme, see the # documentation. # html_theme_options = { - # furo options - - # 'light_css_variables': { - # }, - # 'dark_css_variables': { - # } - 'sidebar_hide_name': True, - 'navigation_with_keys': True, - 'top_of_page_buttons': ["view", "edit"], - # 'announcement': "", - # 'footer_icons': [], - - "source_repository": "https://github.com/AdaCore/learn", - "source_branch": "master", - "source_directory": "content/", + 'logo_only': True, + 'flyout_display': 'hidden', + 'version_selector': False, + 'prev_next_buttons_location': 'bottom', + 'style_external_links': False, + 'vcs_pageview_mode': '', +# 'style_nav_header_background': 'white', + # Toc options + 'collapse_navigation': False, + 'sticky_navigation': False, + 'navigation_depth': 4, + 'includehidden': True, + 'titles_only': False } html_show_sphinx = False @@ -278,9 +271,6 @@ def get_file_from_conf_ini(path_to_file): html_logo = "img/logo.svg" else: html_logo = "img/logo_sandbox.svg" - html_theme_options["announcement"] = \ - "

⚠️ This version of the website contains UNPUBLISHED contents. " \ - "⚠️

" html_favicon = "img/favicon.ico" diff --git a/frontend/sphinx/img/favicon.ico b/frontend/sphinx/img/favicon.ico index 99b6ed4c8..c5b94212d 100644 Binary files a/frontend/sphinx/img/favicon.ico and b/frontend/sphinx/img/favicon.ico differ diff --git a/frontend/sphinx/img/learn_meta_img.jpeg b/frontend/sphinx/img/learn_meta_img.jpeg index f5458c8db..5d618d02a 100644 Binary files a/frontend/sphinx/img/learn_meta_img.jpeg and b/frontend/sphinx/img/learn_meta_img.jpeg differ diff --git a/frontend/sphinx/img/logo.png b/frontend/sphinx/img/logo.png index 08f07869d..f7834efd2 100644 Binary files a/frontend/sphinx/img/logo.png and b/frontend/sphinx/img/logo.png differ diff --git a/frontend/sphinx/img/logo.svg b/frontend/sphinx/img/logo.svg index 239080369..04da7fc58 100644 --- a/frontend/sphinx/img/logo.svg +++ b/frontend/sphinx/img/logo.svg @@ -1,74 +1,17 @@ - - - - - Learn.adacore.com - Created with Sketch. - - - - - - - - + + + Learn.adacore.com + Created with Sketch. + + + + + + + + + + - - - + \ No newline at end of file diff --git a/frontend/sphinx/img/logo_sandbox.svg b/frontend/sphinx/img/logo_sandbox.svg index 75b4c53a8..98b1e0cbb 100644 --- a/frontend/sphinx/img/logo_sandbox.svg +++ b/frontend/sphinx/img/logo_sandbox.svg @@ -22,13 +22,13 @@ inkscape:deskcolor="#d1d1d1" showgrid="false" inkscape:zoom="11.438596" - inkscape:cx="61.93942" - inkscape:cy="21.375001" - inkscape:window-width="3170" - inkscape:window-height="1229" - inkscape:window-x="4097" + inkscape:cx="36.062118" + inkscape:cy="20.981596" + inkscape:window-width="3840" + inkscape:window-height="2046" + inkscape:window-x="3840" inkscape:window-y="41" - inkscape:window-maximized="0" + inkscape:window-maximized="1" inkscape:current-layer="svg15" /> <path - d="M 6.4988223,1.4227197 H 12.922822 V 14.377431 h 8.492 v 3.293571 H 6.4988223 Z m 18.0399997,0 h 15.884 v 3.2447771 h -9.592 v 3.1715864 h 7.392 v 3.1227928 h -7.392 v 3.464349 h 9.636 v 3.244777 h -15.928 z m 32.868,16.2482823 -1.1,-2.927619 h -6.952 l -1.1,2.927619 h -5.94 l 6.864,-16.3214728 h 7.7 l 6.82,16.3214728 z m -4.576,-12.1252197 -2.42,6.4407607 h 4.884 l -2.376,-6.4407607 z m 20.064,6.2699827 v 5.855237 h -6.424 V 1.4227197 h 10.12 c 5.06,0 8.052,1.6589837 8.052,4.2694434 v 1.8541583 c 0,1.732174 -1.364,3.0496026 -3.696,3.7327136 l 4.356,6.391967 h -6.644 l -3.916,-5.855237 z m 0,-7.5386174 v 4.7085865 h 2.2 c 2.156,0 3.08,-0.6099208 3.08,-1.7077777 V 6.0093218 c 0,-1.1222537 -0.924,-1.7321742 -3.08,-1.7321742 z m 15.444,-2.8544279 h 6.38 l 7.127998,9.6123473 h 0.088 l -0.088,-9.6123473 h 5.588 V 17.671002 h -6.248 L 93.926822,7.9366705 h -0.088 l 0.088,9.7343315 h -5.588 z" + d="M 6.4988223,1.4815292 H 12.922822 V 24.845529 h 8.492 v 5.94 H 6.4988223 Z m 18.0399997,0 h 15.884 v 5.852 h -9.592 v 5.7199998 h 7.392 v 5.632 h -7.392 v 6.248 h 9.636 v 5.852 h -15.928 z m 32.868,29.3039998 -1.1,-5.28 h -6.952 l -1.1,5.28 h -5.94 l 6.864,-29.4359998 h 7.7 l 6.82,29.4359998 z m -4.576,-21.8679998 -2.42,11.6159998 h 4.884 l -2.376,-11.6159998 z m 20.064,11.3079998 v 10.56 h -6.424 V 1.4815292 h 10.12 c 5.06,0 8.052,2.992 8.052,7.7 v 3.3439998 c 0,3.124 -1.364,5.5 -3.696,6.732 l 4.356,11.528 h -6.644 l -3.916,-10.56 z m 0,-13.5959998 v 8.4919998 h 2.2 c 2.156,0 3.08,-1.1 3.08,-3.08 V 9.7535292 c 0,-2.024 -0.924,-3.124 -3.08,-3.124 z m 15.444,-5.148 h 6.38 l 7.127998,17.3359998 h 0.088 l -0.088,-17.3359998 h 5.588 V 30.785529 h -6.248 l -7.259998,-17.556 h -0.088 l 0.088,17.556 h -5.588 z" id="LEARN" - style="fill:#8b2737;fill-opacity:1;stroke-width:0.74463" /> + style="fill:#6c6753" /> <text xml:space="preserve" - style="font-size:24.8119px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#af4f47;fill-opacity:1;stroke-width:1.43146" - x="6.0766759" - y="35.695484" + style="font-size:13.327px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;stroke-width:0.768868" + x="20.544256" + y="45.29076" id="text402" - transform="scale(0.88042415,1.1358162)" + transform="scale(1.110378,0.90059421)" inkscape:label="SANDBOX"><tspan sodipodi:role="line" id="tspan400" - x="6.0766759" - y="35.695484" - style="fill:#af4f47;fill-opacity:1;stroke-width:1.43146">SANDBOX</tspan></text> + x="20.544256" + y="45.29076" + style="stroke-width:0.768868;fill:#000000">SANDBOX</tspan></text> </g> </g> </g> diff --git a/frontend/sphinx/widget/templates/widget.html b/frontend/sphinx/widget/templates/widget.html index 23f5b0b6d..8c91f62f2 100644 --- a/frontend/sphinx/widget/templates/widget.html +++ b/frontend/sphinx/widget/templates/widget.html @@ -14,30 +14,24 @@ <div id="{{ w.id }}.settings-bar" class="settings-bar"> <div class="dropdown-container settingsbar-item"> <button class="dropdown-btn"> - <span class="fa-solid fa-gear"></span> + <span class="fa fa-cog"></span> Settings </button> <div class="dropdown-content"> - <div class="settings-bar-entries"> - <div class="settings-bar-entry"> - <label> - <input id="{{ w.id }}.settings-bar.tab-setting" type="checkbox" class="checkbox tab-setting"> - Use tabbed editor view - </label> - </div> - <div class="settings-bar-entry"> - <label> - <input id="{{ w.id }}.settings-bar.theme-setting" type="checkbox" class="checkbox theme-setting"> - Use the dark theme - </label> - </div> - </div> + <label> + <input id="{{ w.id }}.settings-bar.tab-setting" type="checkbox" class="checkbox tab-setting"> + Use tabbed editor view + </label> + <label> + <input id="{{ w.id }}.settings-bar.theme-setting" type="checkbox" class="checkbox theme-setting"> + Use the dark theme + </label> </div> </div> <div class="dropdown-container settingsbar-item"> <button class="dropdown-btn"> - <span class="fa-solid fa-gear"></span> + <span class="fa fa-cog"></span> Switches </button> <div id="{{ w.id }}.settings-bar.compiler-switches" class="dropdown-content compiler-switches"> @@ -51,7 +45,7 @@ </span> <span class="compiler-switch-help"> <button id="{{ w.id }}.settings-bar.compiler-switches-help.{{ sw }}" type="button" title="{{ w.switch_description[sw] }}"> - <span class="fa-solid fa-circle-question"></span> + <span class="fa fa-question-circle"></span> </button> </span> </div> @@ -63,11 +57,11 @@ </div> <button id="{{ w.id }}.settings-bar.reset-btn" type="button" class="settingsbar-item reset-btn" title="Reset editor to default state"> - <span class="fa-solid fa-rotate-left"></span> + <span class="fa fa-undo"></span> Reset </button> <button id="{{ w.id }}.settings-bar.download-btn" type="button" class="settingsbar-item download-btn" title="Download source files"> - <span class="fa-solid fa-download"></span> + <span class="fa fa-download"></span> Download </button> </div> diff --git a/frontend/src/index.ts b/frontend/src/index.ts index 13b668795..546578c70 100644 --- a/frontend/src/index.ts +++ b/frontend/src/index.ts @@ -1,6 +1,8 @@ import './styles/learn.scss'; -import {getElemsByClass} from './ts/dom-utils'; +import './styles/learn-dark.scss'; +import {getElemsByClass, getElemById} from './ts/dom-utils'; import {widgetFactory} from './ts/widget'; +import {scrollTop} from './ts/scrolltop'; // #if SANDBOX import {sandboxRedirect} from './ts/sandbox-redirect'; @@ -16,6 +18,10 @@ function entrypoint(): void { widgetFactory(we as Array<HTMLDivElement>); + // register scroll to top btn functionality + const btn = getElemById('scrollToTopBtn'); + scrollTop(btn as HTMLButtonElement); + // #if SANDBOX // This is used to redirect non AdaCore staff to the main site if // the staging site is accidentally reached diff --git a/frontend/src/styles/_variables-dark.scss b/frontend/src/styles/_variables-dark.scss new file mode 100644 index 000000000..d082be8df --- /dev/null +++ b/frontend/src/styles/_variables-dark.scss @@ -0,0 +1,40 @@ +// colors +@use 'sass:color'; + +$color-theme-bg-dark: #C34C01; // dark orange + +$color-theme-bg-light: rgb(252, 252, 252); + +$color-theme-alt-bg: #222222; + +$color-bg-dark: #111111; + +$color-content-bg: black; +$color-content-font: #edc; + +$color-border: #444; + +$color-code-font: #DE935F; +$color-code-bg: $color-bg-dark; +$color-code-border: color.scale($color-border, $lightness: -50%); + +$color-menu-bg-l1: #222222; +$color-menu-bg-l2: color.scale($color-menu-bg-l1, $lightness: 5%); +$color-menu-bg-l3: color.scale($color-menu-bg-l1, $lightness: 10%); +$color-menu-bg-hover: color.scale($color-menu-bg-l1, $lightness: -20%); + +$color-menu-font: #f0f0f0; +$color-menu-alt-font: #e8e8e8; +$color-menu-alt-font-hover: color.scale($color-menu-alt-font, $lightness: 20%); + +$color-tab-active-font: rgb(200, 200, 200); +$color-tab-hover-font: color.scale($color-tab-active-font, $lightness: 20%); +$color-tab-font: color.scale($color-tab-active-font, $lightness: -30%); + +$color-widget-border: $color-border; + +$color-widget-output-area: rgb(23, 23, 23); + +$color-widget-info: rgb(234, 234, 234); + +$color-settingsbar-bg: rgb(50, 50, 50); diff --git a/frontend/src/styles/_variables.scss b/frontend/src/styles/_variables.scss index 087562e0b..42cd4dd95 100644 --- a/frontend/src/styles/_variables.scss +++ b/frontend/src/styles/_variables.scss @@ -1,7 +1,7 @@ // colors @use 'sass:color'; -$color-theme-bg-dark: #0d6efd; +$color-theme-bg-dark: #F56F23; // orange $color-theme-bg-light: rgb(252, 252, 252); $color-theme-fg-dark: rgb(64, 64, 64); @@ -24,8 +24,9 @@ $color-slider-link-bg: rgb(74, 144, 226); $color-slider-link-bg-hover: color.scale($color-slider-link-bg, $lightness: -12%); $color-slider-link-fg: white; -$color-tab-bg: rgb(220, 220, 220); -$color-tab-font: rgb(20, 20, 20); +$color-tab-active-font: rgb(51, 51, 51); +$color-tab-hover-font: color.scale($color-tab-active-font, $lightness: 10%); +$color-tab-font: color.scale($color-tab-active-font, $lightness: 30%); $color-widget-border: rgb(221, 221, 221); @@ -52,7 +53,6 @@ $color-widget-msg: rgb(153, 68, 68); $color-widget-msg-info: rgb(68, 68, 153); $color-widget-msg-info-bg-hover: rgb(221, 221, 255); -$color-widget-output: rgb(20, 20, 20); $color-widget-info: rgb(34, 34, 34); $color-widget-error: rgb(136, 34, 34); @@ -61,7 +61,6 @@ $color-widget-success: rgb(0, 119, 0); $color-widget-readonly: rgb(192, 192, 192); $color-settingsbar-bg: rgb(220, 220, 220); -$color-settingsbar-fg: rgb(64, 64, 64); // fonts $lato_font-path: '~lato-font/fonts'; diff --git a/frontend/src/styles/learn-dark.scss b/frontend/src/styles/learn-dark.scss new file mode 100644 index 000000000..84516c7e5 --- /dev/null +++ b/frontend/src/styles/learn-dark.scss @@ -0,0 +1,460 @@ +@use 'sass:color'; + +@use 'variables' as v; +@use 'variables-dark' as v_darktheme; + +@mixin menu_vertical_current_hover_dark_mode_colors { + &:hover { + background-color: #777777; + color: darkorange; + } +} + +@mixin menu_vertical_current_dark_mode_colors { + @include menu_vertical_current_hover_dark_mode_colors; + & { + color: v_darktheme.$color-menu-font; + } + + + &:visited { + color: v_darktheme.$color-menu-font; + @include menu_vertical_current_hover_dark_mode_colors; + } +} + +@mixin menu_vertical_alt_current_hover_dark_mode_colors { + color: v_darktheme.$color-menu-alt-font; + &:hover { + color: v_darktheme.$color-menu-alt-font-hover; + } +} + +@media (prefers-color-scheme: dark) { + + html { + background-color: v_darktheme.$color-bg-dark !important; + } + body { + background-color: v_darktheme.$color-bg-dark !important; + } + img { + &.dark-mode-invert-image { + -webkit-filter: invert(0.9); + filter: invert(0.9); + } + &.dark-mode-light-background { + background-color: lightgrey !important; + } + } + label { + color: white; + } + .rst-content code, + .rst-content tt, + code { + color: v_darktheme.$color-code-font; + background-color: v_darktheme.$color-code-bg !important; + border: 1px solid v_darktheme.$color-code-border; + } + pre { + color: v_darktheme.$color-code-font; + background-color: v_darktheme.$color-code-bg !important; + border: 1px solid v_darktheme.$color-code-border; + } + .btn { + background-color: v_darktheme.$color-theme-bg-dark; + color: #fff; + + &:hover { + background-color: color.scale(v_darktheme.$color-theme-bg-dark, $lightness: 10%); + } + } + + .btn-neutral { + background-color: #b3b6b6 !important; + color: #404040 !important; + } + + .wy-nav-content-wrap { + background: v_darktheme.$color-bg-dark !important; + } + .wy-nav-content { + background: v_darktheme.$color-content-bg !important; + color: v_darktheme.$color-content-font; + ::selection { + // color: #333333; + // background: lightyellow; + + // background: #002770; + background: #474747; + } + } + + .wy-side-nav-search { + background-color: v_darktheme.$color-theme-bg-dark; + } + + .wy-nav-side { + background-color: color.scale(v_darktheme.$color-menu-bg-l1, $lightness: -10%); + } + + .wy-menu-vertical { + li { + button.toctree-expand { + color: lightgrey; + } + button.toctree-expand:before { + color: lightgrey; + } + ul { + background-color: v_darktheme.$color-menu-bg-l1; + } + a { + @include menu_vertical_alt_current_hover_dark_mode_colors; + + & { + background-color: v_darktheme.$color-menu-bg-l1; + } + + &:hover { + background-color: v_darktheme.$color-menu-bg-hover; + } + + &:visited { + @include menu_vertical_alt_current_hover_dark_mode_colors; + + & { + background-color: v_darktheme.$color-menu-bg-l1; + } + + &:hover { + background-color: v_darktheme.$color-menu-bg-hover; + } + } + } + &.toctree-l2 { + &.current>a { + background-color: v_darktheme.$color-menu-bg-l1; + } + } + &.current { + & { + background-color: v_darktheme.$color-menu-bg-l1; + } + + a { + & { + background-color: v_darktheme.$color-menu-bg-l1; + } + @include menu_vertical_current_dark_mode_colors; + + &:hover { + background-color: v_darktheme.$color-menu-bg-hover; + } + &:visited { + background-color: v_darktheme.$color-menu-bg-l1; + &:hover { + background-color: v_darktheme.$color-menu-bg-hover; + } + } + } + &.toctree-l2 { + background-color: v_darktheme.$color-menu-bg-l1; + + li.toctree-l3>a { + @include menu_vertical_current_dark_mode_colors; + + & { + background-color: v_darktheme.$color-menu-bg-l2; + } + &:hover { + background-color: v_darktheme.$color-menu-bg-hover; + } + &:visited { + background-color: v_darktheme.$color-menu-bg-l2; + &:hover { + background-color: v_darktheme.$color-menu-bg-hover; + } + } + } + } + &.toctree-l3 { + li.toctree-l4>a { + @include menu_vertical_current_dark_mode_colors; + + & { + background-color: v_darktheme.$color-menu-bg-l3; + } + &:hover { + background-color: v_darktheme.$color-menu-bg-hover; + } + &:visited { + background-color: v_darktheme.$color-menu-bg-l3; + &:hover { + background-color: v_darktheme.$color-menu-bg-hover; + } + } + } + } + } + } + } + + .admonition-in-other-languages { + background: v_darktheme.$color-theme-alt-bg; + } + .rst-content { + .highlight { + background: v_darktheme.$color-theme-alt-bg; + } + } + .rst-content .admonition, + .rst-content .admonition-todo, + .rst-content .attention, + .rst-content .caution, + .rst-content .danger, + .rst-content .error, + .rst-content .hint, + .rst-content .important, + .rst-content .note, + .rst-content .seealso, + .rst-content .tip, + .rst-content .warning, + .wy-alert { + background: v_darktheme.$color-theme-alt-bg; + } + .rst-content .admonition-title, .wy-alert-title { + // background: #6ab0de; + background: #1a608e; + } + .rst-content div[class^=highlight], + .rst-content pre.literal-block { + border: 1px solid v_darktheme.$color-code-border; + color: v_darktheme.$color-code-font; + } + .rst-content code.literal, + .rst-content tt.literal { + color: v_darktheme.$color-code-font; + } + .rst-content table.docutils thead, + .rst-content table.field-list thead, + .wy-table thead { + background: #666666 !important; + color: #cccccc !important; + } + .rst-content table.docutils, + .wy-table-bordered-all { + border: 1px solid v_darktheme.$color-border; + } + .rst-content table.docutils td, + .wy-table-bordered-all td { + border-bottom: 1px solid v_darktheme.$color-border; + border-left: 1px solid v_darktheme.$color-border; + } + .wy-table-bordered { + border: 1px solid v_darktheme.$color-border; + } + .wy-table-bordered-rows td { + border-bottom: 1px solid v_darktheme.$color-border; + } + .wy-table-horizontal td, + .wy-table-horizontal th { + border-bottom: 1px solid v_darktheme.$color-border; + } + + .rst-content table.docutils:not(.field-list) tr:nth-child(2n-1) td, + .wy-table-backed, + .wy-table-odd td, + .wy-table-striped tr:nth-child(2n-1) td { + background-color: v_darktheme.$color-theme-alt-bg; + } + + // + // theme overrides: widget + // + + .tab { + button { + color: v_darktheme.$color-tab-font; + border-left: 1px dotted v_darktheme.$color-widget-border; + border-right: 1px dotted v_darktheme.$color-widget-border; + border-bottom: 1px dotted v_darktheme.$color-widget-border; + &:hover { + background-color: color.scale(v_darktheme.$color-theme-bg-dark, $lightness: 30%); + color: v_darktheme.$color-tab-hover-font; + } + &.active { + color: v_darktheme.$color-tab-active-font; + border-left: 1px solid v_darktheme.$color-widget-border; + border-right: 1px solid v_darktheme.$color-widget-border; + border-bottom: 3px solid v_darktheme.$color-theme-bg-dark; + } + } + } + + .settings-bar { + background-color: v_darktheme.$color-settingsbar-bg; + color: white; + + button { + background-color: transparent; + color: white; + } + + .dropdown-container { + .dropdown-content { + background-color: v_darktheme.$color-bg-dark; + + a { + color: white; + + &:hover { + background-color: #ddd; + } + } + } + } + } + + .compiler-switch-help-info { + background-color: v_darktheme.$color-settingsbar-bg; + } + + .compiler-switch-help-info-click-remove { + background-color: v_darktheme.$color-settingsbar-bg; + } + + div { + &.editor-container { + border: 1px solid v_darktheme.$color-widget-border; + } + &.editor_label { + border: 1px solid v_darktheme.$color-widget-border; + color: v.$color-font-grey; + } + &.non-tabbed-links { + border: 1px solid v_darktheme.$color-widget-border; + } + &.code_block_info { + background: v_darktheme.$color-widget-output-area; + } + &.code_block_info_contents { + color: v.$color-font-grey; + } + &.output_line { + color: v.$color-font-grey; + } + &.output_msg { + color: v.$color-widget-msg; + &:hover { + background-color: #fdd; + } + } + &.output_msg_info { + color: v_darktheme.$color-widget-info; + &:hover { + background-color: v.$color-widget-msg-info-bg-hover; + } + } + &.output_info { + color: v_darktheme.$color-widget-info; + } + &.output_error { + color: v.$color-widget-error; + } + &.output_success { + color: v.$color-widget-success; + } + &.output-area { + background: v_darktheme.$color-widget-output-area; + } + } + + .read-only { + background-color: v.$color-widget-readonly; + opacity: 0.2; + position: absolute; + } + + a.ebook-download-button { + background-color: v_darktheme.$color-theme-bg-dark; + } + + // + // Pygments: code coloring + // + + .highlight .hll { background-color: #373B41; } + .highlight { background: #1D1F21; } + .highlight .c { color: #969896; font-style: italic } /* Comment */ + .highlight .err { border: 1px solid #FF0000 } /* Error */ + .highlight .k { color: #41c2ea; font-weight: bold } /* Keyword */ + .highlight .o { color: #8ABEB7; } /* Operator */ + .highlight .p { color: #8ABEB7; } /* Operator (new?) */ + .highlight .ch { color: #969896; font-style: italic } /* Comment.Hashbang */ + .highlight .cm { color: #969896; font-style: italic } /* Comment.Multiline */ + .highlight .cp { color: #969896; } /* Comment.Preproc */ + .highlight .cpf { color: #969896; font-style: italic } /* Comment.PreprocFile */ + .highlight .c1 { color: #969896; font-style: italic } /* Comment.Single */ + .highlight .cs { color: #969896; background-color: #fff0f0 } /* Comment.Special */ + .highlight .gd { color: #A00000; } /* Generic.Deleted */ + .highlight .ge { font-style: italic } /* Generic.Emph */ + .highlight .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */ + .highlight .gr { color: #FF0000; } /* Generic.Error */ + .highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */ + .highlight .gi { color: #00A000; } /* Generic.Inserted */ + .highlight .go { color: #DEB85F; } /* Generic.Output */ + .highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */ + .highlight .gs { font-weight: bold } /* Generic.Strong */ + .highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ + .highlight .gt { color: #0044DD; } /* Generic.Traceback */ + .highlight .kc { color: #B294BB; font-weight: bold } /* Keyword.Constant */ + .highlight .kd { color: #B294BB; font-weight: bold } /* Keyword.Declaration */ + .highlight .kn { color: #B294BB; font-weight: bold } /* Keyword.Namespace */ + .highlight .kp { color: #B294BB; } /* Keyword.Pseudo */ + .highlight .kr { color: #B294BB; font-weight: bold } /* Keyword.Reserved */ + .highlight .kt { color: #B294BB; } /* Keyword.Type */ + .highlight .m { color: #DE935F; } /* Literal.Number */ + .highlight .s { color: #B5BD68; } /* Literal.String */ + .highlight .n { color: #DE935F; } /* Name (new?) */ + .highlight .na { color: #DE935F; } /* Name.Attribute */ + .highlight .nb { color: #DE935F; } /* Name.Builtin */ + .highlight .nc { color: #F0C674; font-weight: bold } /* Name.Class */ + .highlight .no { color: #DE935F; } /* Name.Constant */ + .highlight .nd { color: #555555; font-weight: bold } /* Name.Decorator */ + .highlight .ni { color: #d55537; font-weight: bold } /* Name.Entity */ + .highlight .ne { color: #007020; } /* Name.Exception */ + .highlight .nf { color: #81A2BE; } /* Name.Function */ + .highlight .nl { color: #002070; font-weight: bold } /* Name.Label */ + .highlight .nn { color: #c1c1c1; font-weight: bold } /* Name.Namespace */ + .highlight .nt { color: #ccb350; font-weight: bold } /* Name.Tag */ + .highlight .nv { color: #CC6666; } /* Name.Variable */ + .highlight .ow { color: #B294BB; font-weight: bold } /* Operator.Word */ + .highlight .w { color: #bbbbbb; } /* Text.Whitespace */ + .highlight .mb { color: #DE935F; } /* Literal.Number.Bin */ + .highlight .mf { color: #DE935F; } /* Literal.Number.Float */ + .highlight .mh { color: #DE935F; } /* Literal.Number.Hex */ + .highlight .mi { color: #DE935F; } /* Literal.Number.Integer */ + .highlight .mo { color: #DE935F; } /* Literal.Number.Oct */ + .highlight .sa { color: #DE935F; } /* Literal.String.Affix */ + .highlight .sb { color: #DE935F; } /* Literal.String.Backtick */ + .highlight .sc { color: #DE935F; } /* Literal.String.Char */ + .highlight .dl { color: #DE935F; } /* Literal.String.Delimiter */ + .highlight .sd { color: #DE935F; font-style: italic } /* Literal.String.Doc */ + .highlight .s2 { color: #b3e87f; } /* Literal.String.Double */ + .highlight .se { color: #DE935F; font-weight: bold } /* Literal.String.Escape */ + .highlight .sh { color: #DE935F } /* Literal.String.Heredoc */ + .highlight .si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */ + .highlight .sx { color: #c65d09; } /* Literal.String.Other */ + .highlight .sr { color: #235388; } /* Literal.String.Regex */ + .highlight .s1 { color: #b3e87f; } /* Literal.String.Single */ + .highlight .ss { color: #517918; } /* Literal.String.Symbol */ + .highlight .bp { color: #007020; } /* Name.Builtin.Pseudo */ + .highlight .fm { color: #81A2BE; } /* Name.Function.Magic */ + .highlight .vc { color: #CC6666; } /* Name.Variable.Class */ + .highlight .vg { color: #CC6666; } /* Name.Variable.Global */ + .highlight .vi { color: #CC6666; } /* Name.Variable.Instance */ + .highlight .vm { color: #CC6666; } /* Name.Variable.Magic */ + .highlight .il { color: #DE935F; } /* Literal.Number.Integer.Long */ +} diff --git a/frontend/src/styles/learn.scss b/frontend/src/styles/learn.scss index f542e983f..182eca4d7 100644 --- a/frontend/src/styles/learn.scss +++ b/frontend/src/styles/learn.scss @@ -3,45 +3,142 @@ @use 'variables' as v; // theme overrides -@mixin dark_mode_image_background_adaptation { - img { - &.dark-mode-invert-image { - -webkit-filter: invert(0.9); - filter: invert(0.9); +.btn { + background-color: v.$color-theme-bg-dark; + color: #fff; + + &:hover { + background-color: color.scale(v.$color-theme-bg-dark, $lightness: 10%); + } +} + +a { + color: #e1641b; + text-decoration: none; + cursor: pointer; + + &:hover { + color: #bc4600; + } + + &:visited { + color: #eba177; + } +} + +// Add scrollbar to TOC (side navigation) +.wy-side-scroll { + width: auto; + overflow-y: auto; +} + +.wy-side-nav-search { + background-color: v.$color-theme-bg-dark; + a { + text-align: right !important; + float: right; + } +} + +@mixin menu_vertical_current_hover_light_mode_colors { + &:hover { + background-color: #777777; + color: darkorange; + } +} + +@mixin menu_vertical_current_light_mode_colors { + @include menu_vertical_current_hover_light_mode_colors; + + &:visited { + color: #303030; + @include menu_vertical_current_hover_light_mode_colors; + } +} + +@mixin menu_vertical_alt_current_hover_light_mode_colors { + color: #e8e8e8; + &:hover { + color: lightgoldenrodyellow; + } +} + +.wy-menu-vertical { + p.caption { + color: #fff; + } + li { + a { + @include menu_vertical_alt_current_hover_light_mode_colors; + + &:visited { + @include menu_vertical_alt_current_hover_light_mode_colors; + } } - &.dark-mode-light-background { - background-color: lightgrey !important; + &.current { + a { + background-color: #eeeeee; + color: #303030; + + @include menu_vertical_current_light_mode_colors; + } + &.toctree-l2 { + li.toctree-l3>a { + @include menu_vertical_current_light_mode_colors; + } + } + &.toctree-l3 { + li.toctree-l4>a { + @include menu_vertical_current_light_mode_colors; + } + } } } } -@media not print { - body[data-theme="dark"] { - @include dark_mode_image_background_adaptation; +.wy-nav-top { + background-color: v.$color-theme-bg-dark; + img { + border-radius: 0 !important; + background-color: transparent !important; } - @media (prefers-color-scheme: dark) { - body:not([data-theme="light"]) { - @include dark_mode_image_background_adaptation; + + a { + color: #e8e8e8; + + &:hover { + color: #100000; + } + + &:visited { + color: #e8e8e8; + &:hover { + color: #100000; + } } } } -.btn { - background-color: v.$color-theme-bg-dark; - color: #fff; - padding-top: 6px; - padding-right: 12px; - padding-bottom: 8px; - padding-left: 12px; - font-family: v.$lato-sans-serif-font; - font-size: 16px; +.wy-table-responsive table td, .wy-table-responsive table th { + white-space: normal; +} - &:hover { - background-color: color.scale(v.$color-theme-bg-dark, $lightness: 30%); +.wy-table-responsive { + margin-bottom: 24px; + max-width: 100%; + overflow: visible; +} + +.wy-menu { + p { + margin-left: 20px; + margin-bottom: 7px; + margin-top: 10px; } } .admonition-in-other-languages { + background: v.$color-theme-alt-bg; padding: 12px; margin-bottom: 24px; } @@ -58,7 +155,6 @@ pre.widget { white-space: normal; padding-bottom: 10px; position: relative; - overflow: initial; } .tab { @@ -69,6 +165,7 @@ pre.widget { margin-bottom: 10px; button { + background-color: inherit; float: left; outline: none; cursor: pointer; @@ -76,22 +173,19 @@ pre.widget { transition: 0.3s; flex: 0 0 auto; border: 1px solid transparent; - // Inactivate tab is darker - background-color: color.scale(v.$color-tab-bg, $lightness: -30%); - color: color.scale(v.$color-tab-font, $lightness: -30%); + color: v.$color-tab-font; font-family: v.$mono-font; font-size: 13px; border-left: 1px dotted v.$color-widget-border; border-right: 1px dotted v.$color-widget-border; border-bottom: 1px dotted v.$color-widget-border; &:hover { - background-color: color.scale(v.$color-tab-bg, $lightness: 30%); - color: color.scale(v.$color-tab-font, $lightness: -30%); + background-color: color.scale(v.$color-theme-bg-dark, $lightness: 30%); + color: v.$color-tab-hover-font; cursor: pointer; } &.active { - background-color: v.$color-tab-bg; - color: v.$color-tab-font; + color: v.$color-tab-active-font; border-left: 1px solid v.$color-widget-border; border-right: 1px solid v.$color-widget-border; border-bottom: 3px solid v.$color-theme-bg-dark; @@ -106,15 +200,14 @@ pre.widget { .settings-bar { background-color: v.$color-settingsbar-bg; - color: v.$color-settingsbar-fg; font-family: v.$lato-sans-serif-font; padding-left: 13px; display: block; margin-top: 0px; button { - background-color: v.$color-settingsbar-bg; - color: v.$color-settingsbar-fg; + background-color: transparent; + color: v.$color-font-grey; opacity: 0.5; padding: 5px; margin-left: 5px; @@ -135,8 +228,6 @@ pre.widget { display: none; position: absolute; background-color: v.$color-theme-bg-light; - color: v.$color-theme-fg-dark; - font-size: 0.90em; min-width: 300px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 10; @@ -237,16 +328,13 @@ div { line-height: normal; } &.code_block_info_header { - background: v.$color-widget-output-area; - color: v.$color-widget-output; margin-top: 2px; font-weight: bold; padding-left: 3px; padding-right: 3px; } &.code_block_info_contents { - background: v.$color-widget-output-area; - color: v.$color-widget-output; + color: v.$color-font-grey; padding-left: 15px; padding-right: 3px; white-space: pre-wrap; @@ -266,12 +354,6 @@ div { background-color: #fdd; } } - &.output_console { - color: v.$color-widget-output; - &:hover { - background-color: color.scale(v.$color-widget-output-area, $lightness: 30%); - } - } &.output_msg_info { color: v.$color-widget-info; padding-left: 15px; @@ -282,6 +364,7 @@ div { } } &.output_info { + color: v.$color-widget-info; padding-left: 3px; padding-right: 3px; white-space: pre-wrap; @@ -303,7 +386,6 @@ div { font-size: 12px; font-style: normal; background: v.$color-widget-output-area; - color: v.$color-widget-success; margin-top: 8px; max-height: 250px; overflow-y: auto; @@ -348,6 +430,32 @@ div#learn-adacore-com>h1 { } } +#scrollToTopBtn { + display: none; + position: fixed; + bottom: 20px; + right: 30px; + z-index: 99; + border: none; + outline: none; + background-color: v.$color-scroll-button-bg; + color: v.$color-scroll-button-fg; + cursor: pointer; + padding: 15px; + border-radius: 10px; + font-size: 18px; + transition: opacity 600ms; + &:hover { + background-color: v.$color-scroll-button-hover; + } + &.show { + opacity: 1; + } + &.hide { + opacity: 0; + } +} + html { scroll-behavior: smooth; }