diff --git a/frontend/requirements.txt b/frontend/requirements.txt index 4e125faeb..0c82792c9 100644 --- a/frontend/requirements.txt +++ b/frontend/requirements.txt @@ -1,5 +1,6 @@ coverage==7.8.0 docutils==0.21.2 +furo==2024.8.6 graphviz==0.20.3 ipython==9.1.0 pdf2image==1.17.0 diff --git a/frontend/requirements_frozen.txt b/frontend/requirements_frozen.txt index ddc065eb2..dca7cdde6 100644 --- a/frontend/requirements_frozen.txt +++ b/frontend/requirements_frozen.txt @@ -1,12 +1,14 @@ alabaster==1.0.0 asttokens==3.0.0 babel==2.17.0 +beautifulsoup4==4.13.4 certifi==2025.1.31 charset-normalizer==3.4.1 coverage==7.8.0 decorator==5.2.1 docutils==0.21.2 executing==2.2.0 +furo==2024.8.6 graphviz==0.20.3 idna==3.10 imagesize==1.4.1 @@ -36,8 +38,10 @@ roman-numerals-py==3.1.0 setuptools==79.0.1 six==1.17.0 snowballstemmer==2.2.0 +soupsieve==2.7 Sphinx==8.1.3 sphinx-reredirects==0.1.6 +sphinx-basic-ng==1.0.0b2 sphinx-rtd-theme==3.0.2 sphinxcontrib-applehelp==2.0.0 sphinxcontrib-bibtex==2.6.3 diff --git a/frontend/sphinx/_templates/footer.html b/frontend/sphinx/_templates/footer.html deleted file mode 100644 index 8b154c0e7..000000000 --- a/frontend/sphinx/_templates/footer.html +++ /dev/null @@ -1,75 +0,0 @@ - diff --git a/frontend/sphinx/_templates/layout.html b/frontend/sphinx/_templates/layout.html deleted file mode 100644 index e8796d72b..000000000 --- a/frontend/sphinx/_templates/layout.html +++ /dev/null @@ -1,43 +0,0 @@ -{% 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 f304d5150..5c1263cf2 100644 --- a/frontend/sphinx/conf.py +++ b/frontend/sphinx/conf.py @@ -104,7 +104,6 @@ def get_file_from_conf_ini(path_to_file): 'sphinx.ext.graphviz', 'sphinx.ext.extlinks', 'widget_extension', - 'sphinx_rtd_theme', 'sphinx_reredirects', 'sphinxcontrib.plantuml', ] @@ -183,6 +182,7 @@ 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,8 +232,7 @@ 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 = 'learn_theme' -html_theme = 'sphinx_rtd_theme' +html_theme = 'furo' if 'GEN_LEARN_SITE' in os.environ and os.environ['GEN_LEARN_SITE'] == "yes": html_title = "learn.adacore.com" @@ -245,24 +244,32 @@ 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 = { - '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 + # 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/", } html_show_sphinx = False @@ -271,6 +278,9 @@ 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 c5b94212d..99b6ed4c8 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 5d618d02a..f5458c8db 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 f7834efd2..08f07869d 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 04da7fc58..239080369 100644 --- a/frontend/sphinx/img/logo.svg +++ b/frontend/sphinx/img/logo.svg @@ -1,17 +1,74 @@ - - - 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 98b1e0cbb..75b4c53a8 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="36.062118" - inkscape:cy="20.981596" - inkscape:window-width="3840" - inkscape:window-height="2046" - inkscape:window-x="3840" + inkscape:cx="61.93942" + inkscape:cy="21.375001" + inkscape:window-width="3170" + inkscape:window-height="1229" + inkscape:window-x="4097" inkscape:window-y="41" - inkscape:window-maximized="1" + inkscape:window-maximized="0" inkscape:current-layer="svg15" /> <path - 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" + 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" id="LEARN" - style="fill:#6c6753" /> + style="fill:#8b2737;fill-opacity:1;stroke-width:0.74463" /> <text xml:space="preserve" - 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" + 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" id="text402" - transform="scale(1.110378,0.90059421)" + transform="scale(0.88042415,1.1358162)" inkscape:label="SANDBOX"><tspan sodipodi:role="line" id="tspan400" - x="20.544256" - y="45.29076" - style="stroke-width:0.768868;fill:#000000">SANDBOX</tspan></text> + x="6.0766759" + y="35.695484" + style="fill:#af4f47;fill-opacity:1;stroke-width:1.43146">SANDBOX</tspan></text> </g> </g> </g> diff --git a/frontend/sphinx/widget/templates/widget.html b/frontend/sphinx/widget/templates/widget.html index 8c91f62f2..23f5b0b6d 100644 --- a/frontend/sphinx/widget/templates/widget.html +++ b/frontend/sphinx/widget/templates/widget.html @@ -14,24 +14,30 @@ <div id="{{ w.id }}.settings-bar" class="settings-bar"> <div class="dropdown-container settingsbar-item"> <button class="dropdown-btn"> - <span class="fa fa-cog"></span> + <span class="fa-solid fa-gear"></span> Settings </button> <div class="dropdown-content"> - <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 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> </div> </div> <div class="dropdown-container settingsbar-item"> <button class="dropdown-btn"> - <span class="fa fa-cog"></span> + <span class="fa-solid fa-gear"></span> Switches </button> <div id="{{ w.id }}.settings-bar.compiler-switches" class="dropdown-content compiler-switches"> @@ -45,7 +51,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 fa-question-circle"></span> + <span class="fa-solid fa-circle-question"></span> </button> </span> </div> @@ -57,11 +63,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 fa-undo"></span> + <span class="fa-solid fa-rotate-left"></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 fa-download"></span> + <span class="fa-solid fa-download"></span> Download </button> </div> diff --git a/frontend/src/index.ts b/frontend/src/index.ts index 546578c70..13b668795 100644 --- a/frontend/src/index.ts +++ b/frontend/src/index.ts @@ -1,8 +1,6 @@ import './styles/learn.scss'; -import './styles/learn-dark.scss'; -import {getElemsByClass, getElemById} from './ts/dom-utils'; +import {getElemsByClass} from './ts/dom-utils'; import {widgetFactory} from './ts/widget'; -import {scrollTop} from './ts/scrolltop'; // #if SANDBOX import {sandboxRedirect} from './ts/sandbox-redirect'; @@ -18,10 +16,6 @@ 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 deleted file mode 100644 index d082be8df..000000000 --- a/frontend/src/styles/_variables-dark.scss +++ /dev/null @@ -1,40 +0,0 @@ -// 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 42cd4dd95..087562e0b 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: #F56F23; // orange +$color-theme-bg-dark: #0d6efd; $color-theme-bg-light: rgb(252, 252, 252); $color-theme-fg-dark: rgb(64, 64, 64); @@ -24,9 +24,8 @@ $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-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-tab-bg: rgb(220, 220, 220); +$color-tab-font: rgb(20, 20, 20); $color-widget-border: rgb(221, 221, 221); @@ -53,6 +52,7 @@ $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,6 +61,7 @@ $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 deleted file mode 100644 index 84516c7e5..000000000 --- a/frontend/src/styles/learn-dark.scss +++ /dev/null @@ -1,460 +0,0 @@ -@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 182eca4d7..f542e983f 100644 --- a/frontend/src/styles/learn.scss +++ b/frontend/src/styles/learn.scss @@ -3,142 +3,45 @@ @use 'variables' as v; // theme overrides -.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; - } +@mixin dark_mode_image_background_adaptation { + img { + &.dark-mode-invert-image { + -webkit-filter: invert(0.9); + filter: invert(0.9); } - &.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; - } - } + &.dark-mode-light-background { + background-color: lightgrey !important; } } } -.wy-nav-top { - background-color: v.$color-theme-bg-dark; - img { - border-radius: 0 !important; - background-color: transparent !important; +@media not print { + body[data-theme="dark"] { + @include dark_mode_image_background_adaptation; } - - a { - color: #e8e8e8; - - &:hover { - color: #100000; - } - - &:visited { - color: #e8e8e8; - &:hover { - color: #100000; - } + @media (prefers-color-scheme: dark) { + body:not([data-theme="light"]) { + @include dark_mode_image_background_adaptation; } } } -.wy-table-responsive table td, .wy-table-responsive table th { - white-space: normal; -} - -.wy-table-responsive { - margin-bottom: 24px; - max-width: 100%; - overflow: visible; -} +.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-menu { - p { - margin-left: 20px; - margin-bottom: 7px; - margin-top: 10px; + &:hover { + background-color: color.scale(v.$color-theme-bg-dark, $lightness: 30%); } } .admonition-in-other-languages { - background: v.$color-theme-alt-bg; padding: 12px; margin-bottom: 24px; } @@ -155,6 +58,7 @@ pre.widget { white-space: normal; padding-bottom: 10px; position: relative; + overflow: initial; } .tab { @@ -165,7 +69,6 @@ pre.widget { margin-bottom: 10px; button { - background-color: inherit; float: left; outline: none; cursor: pointer; @@ -173,19 +76,22 @@ pre.widget { transition: 0.3s; flex: 0 0 auto; border: 1px solid transparent; - color: v.$color-tab-font; + // Inactivate tab is darker + background-color: color.scale(v.$color-tab-bg, $lightness: -30%); + color: color.scale(v.$color-tab-font, $lightness: -30%); 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-theme-bg-dark, $lightness: 30%); - color: v.$color-tab-hover-font; + background-color: color.scale(v.$color-tab-bg, $lightness: 30%); + color: color.scale(v.$color-tab-font, $lightness: -30%); cursor: pointer; } &.active { - color: v.$color-tab-active-font; + background-color: v.$color-tab-bg; + color: v.$color-tab-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; @@ -200,14 +106,15 @@ 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: transparent; - color: v.$color-font-grey; + background-color: v.$color-settingsbar-bg; + color: v.$color-settingsbar-fg; opacity: 0.5; padding: 5px; margin-left: 5px; @@ -228,6 +135,8 @@ 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; @@ -328,13 +237,16 @@ 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 { - color: v.$color-font-grey; + background: v.$color-widget-output-area; + color: v.$color-widget-output; padding-left: 15px; padding-right: 3px; white-space: pre-wrap; @@ -354,6 +266,12 @@ 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; @@ -364,7 +282,6 @@ div { } } &.output_info { - color: v.$color-widget-info; padding-left: 3px; padding-right: 3px; white-space: pre-wrap; @@ -386,6 +303,7 @@ 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; @@ -430,32 +348,6 @@ 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; }