From 7836821c51b6b73e6c637dbe7ba8d508b09a21d2 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Tue, 7 Jan 2025 09:37:45 +0100 Subject: [PATCH] PAIN.CSS --- .../src/main/resources/com/example/styles.css | 61 +++++++++++-------- .../target/classes/com/example/styles.css | 61 +++++++++++-------- 2 files changed, 74 insertions(+), 48 deletions(-) diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/styles.css b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/styles.css index c93b6f9..8e563b1 100644 --- a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/styles.css +++ b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/resources/com/example/styles.css @@ -18,7 +18,7 @@ -fx-border-color: #8e44ad; -fx-border-width: 0 0 2px 0; -fx-alignment: center; - -fx-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1); + -fx-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .mainTitle { @@ -35,7 +35,7 @@ -fx-background-color: #6a1b9a; -fx-padding: 25px; -fx-alignment: center; - -fx-box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.1); + -fx-box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1); } .footerHeading { @@ -45,7 +45,9 @@ -fx-text-fill: #ffffff; } -.footerText, .footerLink, .footerCopy { +.footerText, +.footerLink, +.footerCopy { -fx-text-fill: #ffffff; } @@ -68,7 +70,7 @@ .cardDiv { -fx-background-color: rgba(156, 89, 182, 0.7); -fx-border-color: transparent; - -fx-border-width: 0px; + -fx-border-width: 0; -fx-border-radius: 12px; -fx-background-radius: 12px; -fx-padding: 15; @@ -83,7 +85,6 @@ } - .cardTitel { -fx-font-size: 18px; -fx-font-weight: 600; @@ -163,7 +164,7 @@ -fx-background-radius: 20px; -fx-padding: 8px 16px; -fx-border-color: transparent; - -fx-border-width: 0px; + -fx-border-width: 0; -fx-cursor: hand; -fx-transition: background-color 0.3s ease; } @@ -173,35 +174,41 @@ } /* Header Buttons */ -.cartBtn, .loginBtn { +.cartBtn, +.loginBtn { -fx-font-size: 14px; -fx-background-color: #8e44ad; -fx-text-fill: #ffffff; -fx-background-radius: 20px; -fx-padding: 8px 16px; -fx-border-color: transparent; - -fx-border-width: 0px; + -fx-border-width: 0; -fx-transition: background-color 0.3s ease; } -.cartBtn:hover, .loginBtn:hover { +.cartBtn:hover, +.loginBtn:hover { -fx-background-color: #732d91; } /* Form Buttons */ -.btnCreateAccount, .btnLogin, .btnCheckOut { +.btnCreateAccount, +.btnLogin, +.btnCheckOut { -fx-font-size: 14px; -fx-background-color: #8e44ad; -fx-text-fill: #ffffff; -fx-background-radius: 20px; -fx-padding: 8px 20px; -fx-border-color: transparent; - -fx-border-width: 0px; + -fx-border-width: 0; -fx-cursor: hand; -fx-transition: background-color 0.3s ease; } -.btnCreateAccount:hover, .btnLogin:hover, .btnCheckOut:hover { +.btnCreateAccount:hover, +.btnLogin:hover, +.btnCheckOut:hover { -fx-background-color: #732d91; } @@ -213,7 +220,7 @@ -fx-background-radius: 20px; -fx-padding: 10px 20px; -fx-border-color: transparent; - -fx-border-width: 0px; + -fx-border-width: 0; -fx-cursor: hand; -fx-transition: background-color 0.3s ease; } @@ -223,7 +230,8 @@ } /* Forms */ -.formTitle, .cartTitle { +.formTitle, +.cartTitle { -fx-font-size: 26px; -fx-font-weight: 700; -fx-text-fill: #6a1b9a; @@ -231,7 +239,7 @@ -fx-padding: 10 0 20 0; } -.cartTitle{ +.cartTitle { -fx-text-fill: #ffffff; } @@ -342,7 +350,7 @@ /* Media Queries - Responsive Design */ /* For screens up to 1200px (large tablets and smaller desktops) */ -@media screen and (max-width: 1200px) { +@media screen and(max-width: 1200px) { #main { -fx-hgap: 15; -fx-vgap: 15; @@ -363,14 +371,15 @@ -fx-font-size: 12px; } - .cartBtn, .loginBtn { + .cartBtn, + .loginBtn { -fx-font-size: 13px; -fx-padding: 7px 14px; } } /* For screens up to 1024px (tablets and medium-sized devices) */ -@media screen and (max-width: 1024px) { +@media screen and(max-width: 1024px) { #main { -fx-hgap: 15; -fx-vgap: 15; @@ -391,14 +400,15 @@ -fx-font-size: 12px; } - .cartBtn, .loginBtn { + .cartBtn, + .loginBtn { -fx-font-size: 14px; -fx-padding: 8px 15px; } } /* For screens up to 768px (mobile devices and small tablets) */ -@media screen and (max-width: 768px) { +@media screen and(max-width: 768px) { #main { -fx-hgap: 10; -fx-vgap: 10; @@ -428,14 +438,15 @@ -fx-font-size: 10px; } - .cartBtn, .loginBtn { + .cartBtn, + .loginBtn { -fx-font-size: 12px; -fx-padding: 6px 12px; } } /* For screens up to 480px (very small screens like smartphones in portrait mode) */ -@media screen and (max-width: 480px) { +@media screen and(max-width: 480px) { #main { -fx-hgap: 5; -fx-vgap: 5; @@ -464,12 +475,14 @@ -fx-font-size: 8px; } - .cartBtn, .loginBtn { + .cartBtn, + .loginBtn { -fx-font-size: 12px; -fx-padding: 5px 10px; } - .formTitle, .cartTitle { + .formTitle, + .cartTitle { -fx-font-size: 20px; } diff --git a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/styles.css b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/styles.css index c93b6f9..8e563b1 100644 --- a/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/styles.css +++ b/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/target/classes/com/example/styles.css @@ -18,7 +18,7 @@ -fx-border-color: #8e44ad; -fx-border-width: 0 0 2px 0; -fx-alignment: center; - -fx-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1); + -fx-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .mainTitle { @@ -35,7 +35,7 @@ -fx-background-color: #6a1b9a; -fx-padding: 25px; -fx-alignment: center; - -fx-box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.1); + -fx-box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1); } .footerHeading { @@ -45,7 +45,9 @@ -fx-text-fill: #ffffff; } -.footerText, .footerLink, .footerCopy { +.footerText, +.footerLink, +.footerCopy { -fx-text-fill: #ffffff; } @@ -68,7 +70,7 @@ .cardDiv { -fx-background-color: rgba(156, 89, 182, 0.7); -fx-border-color: transparent; - -fx-border-width: 0px; + -fx-border-width: 0; -fx-border-radius: 12px; -fx-background-radius: 12px; -fx-padding: 15; @@ -83,7 +85,6 @@ } - .cardTitel { -fx-font-size: 18px; -fx-font-weight: 600; @@ -163,7 +164,7 @@ -fx-background-radius: 20px; -fx-padding: 8px 16px; -fx-border-color: transparent; - -fx-border-width: 0px; + -fx-border-width: 0; -fx-cursor: hand; -fx-transition: background-color 0.3s ease; } @@ -173,35 +174,41 @@ } /* Header Buttons */ -.cartBtn, .loginBtn { +.cartBtn, +.loginBtn { -fx-font-size: 14px; -fx-background-color: #8e44ad; -fx-text-fill: #ffffff; -fx-background-radius: 20px; -fx-padding: 8px 16px; -fx-border-color: transparent; - -fx-border-width: 0px; + -fx-border-width: 0; -fx-transition: background-color 0.3s ease; } -.cartBtn:hover, .loginBtn:hover { +.cartBtn:hover, +.loginBtn:hover { -fx-background-color: #732d91; } /* Form Buttons */ -.btnCreateAccount, .btnLogin, .btnCheckOut { +.btnCreateAccount, +.btnLogin, +.btnCheckOut { -fx-font-size: 14px; -fx-background-color: #8e44ad; -fx-text-fill: #ffffff; -fx-background-radius: 20px; -fx-padding: 8px 20px; -fx-border-color: transparent; - -fx-border-width: 0px; + -fx-border-width: 0; -fx-cursor: hand; -fx-transition: background-color 0.3s ease; } -.btnCreateAccount:hover, .btnLogin:hover, .btnCheckOut:hover { +.btnCreateAccount:hover, +.btnLogin:hover, +.btnCheckOut:hover { -fx-background-color: #732d91; } @@ -213,7 +220,7 @@ -fx-background-radius: 20px; -fx-padding: 10px 20px; -fx-border-color: transparent; - -fx-border-width: 0px; + -fx-border-width: 0; -fx-cursor: hand; -fx-transition: background-color 0.3s ease; } @@ -223,7 +230,8 @@ } /* Forms */ -.formTitle, .cartTitle { +.formTitle, +.cartTitle { -fx-font-size: 26px; -fx-font-weight: 700; -fx-text-fill: #6a1b9a; @@ -231,7 +239,7 @@ -fx-padding: 10 0 20 0; } -.cartTitle{ +.cartTitle { -fx-text-fill: #ffffff; } @@ -342,7 +350,7 @@ /* Media Queries - Responsive Design */ /* For screens up to 1200px (large tablets and smaller desktops) */ -@media screen and (max-width: 1200px) { +@media screen and(max-width: 1200px) { #main { -fx-hgap: 15; -fx-vgap: 15; @@ -363,14 +371,15 @@ -fx-font-size: 12px; } - .cartBtn, .loginBtn { + .cartBtn, + .loginBtn { -fx-font-size: 13px; -fx-padding: 7px 14px; } } /* For screens up to 1024px (tablets and medium-sized devices) */ -@media screen and (max-width: 1024px) { +@media screen and(max-width: 1024px) { #main { -fx-hgap: 15; -fx-vgap: 15; @@ -391,14 +400,15 @@ -fx-font-size: 12px; } - .cartBtn, .loginBtn { + .cartBtn, + .loginBtn { -fx-font-size: 14px; -fx-padding: 8px 15px; } } /* For screens up to 768px (mobile devices and small tablets) */ -@media screen and (max-width: 768px) { +@media screen and(max-width: 768px) { #main { -fx-hgap: 10; -fx-vgap: 10; @@ -428,14 +438,15 @@ -fx-font-size: 10px; } - .cartBtn, .loginBtn { + .cartBtn, + .loginBtn { -fx-font-size: 12px; -fx-padding: 6px 12px; } } /* For screens up to 480px (very small screens like smartphones in portrait mode) */ -@media screen and (max-width: 480px) { +@media screen and(max-width: 480px) { #main { -fx-hgap: 5; -fx-vgap: 5; @@ -464,12 +475,14 @@ -fx-font-size: 8px; } - .cartBtn, .loginBtn { + .cartBtn, + .loginBtn { -fx-font-size: 12px; -fx-padding: 5px 10px; } - .formTitle, .cartTitle { + .formTitle, + .cartTitle { -fx-font-size: 20px; }