UI: Add a default CSS file for internal Ladybird pages

In order to maintain a consistent look and feel between internal about: pages going forward, let's use a central CSS file to define Ladybird colors and some common form control styles.
Author: https://github.com/trflynn89 Commit: https://github.com/LadybirdBrowser/ladybird/commit/a69ecc3943e Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4036
2025-04-22 20:45:14 +00:00 · 2025-03-20 12:41:53 -04:00 · 2025-03-20 12:41:53 -04:00 · a69ecc3943 · 2025-03-22 16:29:07 +00:00
commit a69ecc3943
parent 5f0f97b3cc
2 changed files with 186 additions and 1 deletions
--- a/Base/res/ladybird/ladybird.css
+++ b/Base/res/ladybird/ladybird.css
@ -0,0 +1,175 @@
+:root {
+    --indigo-10: #a5a6f2;
+    --indigo-20: #8a88eb;
+    --indigo-30: #6851d6;
+    --indigo-40: #553fc4;
+    --indigo-50: #4d37b8;
+    --indigo-60: #3c28a1;
+    --indigo-80: #301f82;
+    --indigo-100: #2a1373;
+    --indigo-300: #260f73;
+    --indigo-500: #1d0c59;
+    --indigo-900: #190c4a;
+    --indigo: var(--indigo-100);
+
+    --violet-10: #e0d4ff;
+    --violet-20: #cab5ff;
+    --violet-30: #c3abff;
+    --violet-40: #b496ff;
+    --violet-50: #ab8ef5;
+    --violet-60: #9d7cf2;
+    --violet-80: #936fed;
+    --violet-100: #8a64e5;
+    --violet-300: #8257e6;
+    --violet-500: #7a4ce6;
+    --violet-900: #6a39db;
+    --violet: var(--violet-100);
+
+    --slate-blue-10: #cbe0f7;
+    --slate-blue-20: #c1d9f5;
+    --slate-blue-30: #b6d2f2;
+    --slate-blue-40: #a8c8ed;
+    --slate-blue-50: #97bce6;
+    --slate-blue-60: #86add9;
+    --slate-blue-80: #77a1d1;
+    --slate-blue-100: #8a64e5;
+    --slate-blue-300: #5c8ecc;
+    --slate-blue-500: #5484bf;
+    --slate-blue-900: #4872a3;
+    --slate-blue: var(--slate-blue-100);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --text-color: #2f3640;
+        --toggle-background-color: #cccccc;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --text-color: #e0e0e0;
+        --toggle-background-color: #555555;
+    }
+}
+
+* {
+    color-scheme: light dark;
+    font-family: sans-serif;
+}
+
+body {
+    color: var(--text-color);
+}
+
+/**
+ * Generic form controls.
+ */
+
+button.primary-button {
+    color: white;
+    background-color: var(--violet-100);
+
+    font-size: 14px;
+
+    border: none;
+    border-radius: 4px;
+    padding: 10px 15px;
+
+    cursor: pointer;
+}
+
+button.primary-button:hover {
+    background-color: var(--violet-500);
+    filter: unset;
+}
+
+button.primary-button:active {
+    background-color: var(--violet-900);
+    outline: none;
+}
+
+input[type="search"],
+input[type="text"],
+input[type="url"],
+select {
+    color: var(--text-color);
+
+    font-size: 14px;
+
+    border-radius: 4px;
+    padding: 10px 12px;
+}
+
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="url"]:focus,
+select:focus {
+    border-color: var(--violet-100);
+    outline: none;
+}
+
+/**
+ * Create a toggle switch as a checkbox alternative:
+ *
+ * <div class="toggle-container">
+ *     <label for="your-toggle">Toggle Label</label>
+ *     <label class="toggle">
+ *         <input id="your-toggle" type="checkbox" checked />
+ *         <span class="toggle-button"></span>
+ *     </label>
+ * </div>
+ */
+
+.toggle-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.toggle-container .toggle {
+    width: 50px;
+    height: 24px;
+
+    display: inline-block;
+    position: relative;
+}
+
+.toggle-container .toggle input {
+    display: none;
+}
+
+.toggle-container .toggle-button {
+    background-color: var(--toggle-background-color);
+    border-radius: 24px;
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    cursor: pointer;
+}
+
+.toggle-container .toggle-button:before {
+    background-color: white;
+    border-radius: 50%;
+
+    content: "";
+
+    width: 18px;
+    height: 18px;
+
+    position: absolute;
+    bottom: 3px;
+    left: 3px;
+}
+
+.toggle-container input:checked + .toggle-button {
+    background-color: var(--violet-100);
+}
+
+.toggle-container input:checked + .toggle-button:before {
+    transform: translateX(26px);
+}
--- a/UI/cmake/ResourceFiles.cmake
+++ b/UI/cmake/ResourceFiles.cmake
@ -61,17 +61,23 @@ list(TRANSFORM 48x48_ICONS PREPEND "${LADYBIRD_SOURCE_DIR}/Base/res/icons/48x48/
 list(TRANSFORM 128x128_ICONS PREPEND "${LADYBIRD_SOURCE_DIR}/Base/res/icons/128x128/")
 list(TRANSFORM BROWSER_ICONS PREPEND "${LADYBIRD_SOURCE_DIR}/Base/res/icons/browser/")

+set(INTERNAL_RESOURCES
+    ladybird.css
+)
+list(TRANSFORM INTERNAL_RESOURCES PREPEND "${LADYBIRD_SOURCE_DIR}/Base/res/ladybird/")
+
 set(ABOUT_PAGES
    about.html
    newtab.html
    processes.html
 )
+list(TRANSFORM ABOUT_PAGES PREPEND "${LADYBIRD_SOURCE_DIR}/Base/res/ladybird/about-pages/")
+
 set(WEB_TEMPLATES
    directory.html
    error.html
    version.html
 )
-list(TRANSFORM ABOUT_PAGES PREPEND "${LADYBIRD_SOURCE_DIR}/Base/res/ladybird/about-pages/")
 list(TRANSFORM WEB_TEMPLATES PREPEND "${LADYBIRD_SOURCE_DIR}/Base/res/ladybird/templates/")

 set(THEMES
@ -156,6 +162,10 @@ function(copy_resources_to_build base_directory bundle_target)
        DESTINATION ${base_directory} TARGET ${bundle_target}
    )

+    copy_resource_set(ladybird RESOURCES ${INTERNAL_RESOURCES}
+        DESTINATION ${base_directory} TARGET ${bundle_target}
+    )
+
    copy_resource_set(ladybird/about-pages RESOURCES ${ABOUT_PAGES}
        DESTINATION ${base_directory} TARGET ${bundle_target}
    )