From adbe9c528d2a394990552b0897a3ed101f19b602 Mon Sep 17 00:00:00 2001 From: Sol25 Date: Thu, 2 Nov 2023 21:38:12 +0100 Subject: [PATCH] Prettier update for infobtn.css --- frontend/src/css/InfoButton.css | 146 ++++++++++++++++---------------- 1 file changed, 72 insertions(+), 74 deletions(-) diff --git a/frontend/src/css/InfoButton.css b/frontend/src/css/InfoButton.css index 2d66ce94..dba65ed3 100644 --- a/frontend/src/css/InfoButton.css +++ b/frontend/src/css/InfoButton.css @@ -1,112 +1,110 @@ .info-button { - position: absolute; - bottom: 40px; - right: 20px; - /*background-color: var(--background-2);*/ - background-color: #1CB1F1; - color: white; - width: 50px; - height: 50px; - border-radius: 25px; - display: flex; - justify-content: center; - align-items: center; - font-size: 1.5em; - cursor: pointer; - box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); - z-index: 1000; + position: absolute; + bottom: 40px; + right: 20px; + /*background-color: var(--background-2);*/ + background-color: #1cb1f1; + color: white; + width: 50px; + height: 50px; + border-radius: 25px; + display: flex; + justify-content: center; + align-items: center; + font-size: 1.5em; + cursor: pointer; + box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); + z-index: 1000; } .info-button:hover { - background-color: var(--background-3-hover); + background-color: var(--background-3-hover); } .info-box { - position: absolute; - bottom: 40px; - right: calc(20px + 50px + 10px); - background-color: var(--background-2); - color: white; - width: 300px; - padding: 20px; - border-radius: 10px; - box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); - z-index: 1000; - max-height: 400px; - overflow-y: auto; - scrollbar-width: none; - -ms-overflow-style: none; - opacity: 0; - transition: opacity 0.3s ease; + position: absolute; + bottom: 40px; + right: calc(20px + 50px + 10px); + background-color: var(--background-2); + color: white; + width: 300px; + padding: 20px; + border-radius: 10px; + box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); + z-index: 1000; + max-height: 400px; + overflow-y: auto; + scrollbar-width: none; + -ms-overflow-style: none; + opacity: 0; + transition: opacity 0.3s ease; } .info-box.visible { - opacity: 1; + opacity: 1; } .info-box::-webkit-scrollbar { - display: none; + display: none; } .info-box:before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 20px; - background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); - pointer-events: none; + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 20px; + background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); + pointer-events: none; } .info-box:after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 20px; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); - pointer-events: none; + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 20px; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)); + pointer-events: none; } - .color-code { - display: inline-block; - width: 12px; - height: 12px; - margin-right: 8px; - border-radius: 50%; - vertical-align: middle; + display: inline-block; + width: 12px; + height: 12px; + margin-right: 8px; + border-radius: 50%; + vertical-align: middle; } .green { - background-color: green; + background-color: green; } .yellow { - background-color: yellow; + background-color: yellow; } .red { - background-color: red; + background-color: red; } .scroll-btn { - position: absolute; - right: 10px; - width: 30px; - height: 30px; - background-color: rgba(0, 0, 0, 0.5); - color: white; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - border-radius: 5px; + position: absolute; + right: 10px; + width: 30px; + height: 30px; + background-color: rgba(0, 0, 0, 0.5); + color: white; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + border-radius: 5px; } .scroll-btn.down { - bottom: 400px; + bottom: 400px; } -