From 9da1d34ea75197390132663986b74ceb5680ea97 Mon Sep 17 00:00:00 2001 From: Madiator2011 Date: Mon, 29 Apr 2024 18:19:03 +0200 Subject: [PATCH] made less ugly --- default.css | 132 ++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 97 insertions(+), 35 deletions(-) diff --git a/default.css b/default.css index 92d8fb8..001b49f 100644 --- a/default.css +++ b/default.css @@ -5,16 +5,15 @@ This file could be used under both CC-BY-SA 4.0 or at your chosing GNU GPLv3 or html {} * { - background-color: #311a46; + background-color: #1a1a1a; /* Dark background color */ font-size: 20px; list-style-type: none; - } body{ - color: #95bcf2; - font-family:Open Sans; - font-weight: bold; + color: #e0e0e0; /* Light text color */ + font-family: Open Sans, sans-serif; + font-weight: normal; margin-top: 5%; margin-bottom: 5%; @@ -38,17 +37,17 @@ pre { h1 { font-size: 30px; - color: #CC35F0; + color: #4fc3f7; /* Bright accent color */ } h2 { font-size: 25px; - color: #FFFFFF; + color: #ffffff; } h3 { - font-size: 22px; - color: #3798DD; + font-size: 22px; + color: #03a9f4; /* Complementary accent color */ } code { @@ -74,12 +73,12 @@ th,td { } a { - color: #C648EA; + color: #4fc3f7; text-decoration: none; } a:hover { - color: #DB82F4; + color: #b3e5fc; /* Lighter hover color */ text-decoration: none; } @@ -87,40 +86,36 @@ img { max-width: 50%; height: auto; } -input[type=text] { + +input[type=text], button, .button { padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 0px solid black; - background-color: #b058c6; - color: #311a46; + background-color: #424242; /* Dark button background */ + color: #e0e0e0; font-weight: bold; } -button, .button { - padding: 12px 20px; - margin: 8px 0; - box-sizing: border-box; - border: 0px solid black; - background-color: #b058c6; - color: #311a46; - font-weight: bold; -} + .button { line-height: 3 } + summary { - color: #b058c6; + color: #4fc3f7; font-weight: bold; } + summary:hover, summary:hover > h1 { - color: white; + color: #b3e5fc; cursor: pointer; } + button:hover, input:hover, button:focus, input:focus, .button:hover, .button:focus { - background-color: #3798DD; - color: white; + background-color: #03a9f4; + color: #ffffff; } hr { - border-top: 1px solid #b058c6; + border-top: 1px solid #4fc3f7; } p { @@ -159,13 +154,80 @@ If a screen is at least 1024 pixels wide, we do some more things. /* prgoress bar theme */ -.back_progress {background-color: #543ba3; - width: 100%; - height: 7} -.back_progress:hover { - background-color: #CC35F0; +.back_progress { + background-color: #424242; + width: 100%; + height: 7px; } -.front_progress {background-color: #96bbe8; - height: 7} +.back_progress:hover { + background-color: #4fc3f7; } + +.front_progress { + background-color: #03a9f4; + height: 7px; +} + +/* Footer styles */ +footer { + padding: 20px 0; + text-align: center; +} + +footer .container { + max-width: 960px; + margin: 0 auto; + padding: 0 20px; +} + +footer p { + color: #e0e0e0; + margin-bottom: 10px; +} + +.button-group { + background-color: transparent; + padding: 0; + margin: 0; +} + +.button-group a.button { + padding: 8px 15px; + margin: 5px; + background-color: #4fc3f7; + color: #1a1a1a; + text-decoration: none; + font-size: 0.9em; + border: none; + border-radius: 5px; + transition: background-color 0.3s, color 0.3s; + min-width: 100px; + max-width: 150px; + white-space: normal; +} + +.button-group a.button:hover { + background-color: #03a9f4; + color: #ffffff; +} + + +/* Suggestions container */ +.suggestions-container { + margin-top: 40px; +} + +/* Competitors heading */ +.competitors-heading { + font-size: 28px; + color: #4fc3f7; + margin-bottom: 20px; +} + +/* Problematic heading */ +.problematic-heading { + font-size: 24px; + color: #f44336; + margin-bottom: 10px; +} \ No newline at end of file