diff --git a/styles/fflag.css b/styles/fflag.css index b7264d9..1dd9225 100644 --- a/styles/fflag.css +++ b/styles/fflag.css @@ -1,16 +1,16 @@ - -.fflag { - background-image: url('../public/flagSprite42.png'); +.fflag { + background-image: url("../public/flagSprite42.png"); background-repeat: no-repeat; - background-size: 100% 49494%; - display: inline-block; - overflow: hidden; - position: relative; - vertical-align: middle; - box-sizing: content-box; - } + background-size: 100% 49494%; + display: inline-block; + overflow: hidden; + position: relative; + vertical-align: middle; + box-sizing: content-box; +} + .fflag-CH, -.fflag-NP { box-shadow: none!important } +.fflag-NP { box-shadow: none !important } .fflag-DZ { background-position: center 0.2287%; } .fflag-AO { background-position: center 0.4524%; } .fflag-BJ { background-position: center 0.6721%; } @@ -31,7 +31,7 @@ .fflag-GM { background-position: center 4.0015%; } .fflag-GH { background-position: center 4.2229%; } .fflag-GN { background-position: center 4.441%; } -.fflag-GW { background-position: left 4.66663%; } +.fflag-GW { background-position: left 4.6666%; } .fflag-CI { background-position: center 4.8844%; } .fflag-KE { background-position: center 5.1061%; } .fflag-LS { background-position: center 5.3298%; } @@ -46,13 +46,13 @@ .fflag-MA { background-position: center 7.3231%; } .fflag-MZ { background-position: left 7.5448%; } .fflag-NA { background-position: left 7.7661%; } -.fflag-NE { background-position: center 7.98937%; } +.fflag-NE { background-position: center 7.9894%; } .fflag-NG { background-position: center 8.2099%; } .fflag-CG { background-position: center 8.4316%; } .fflag-RE { background-position: center 8.6533%; } .fflag-RW { background-position: right 8.875%; } .fflag-SH { background-position: center 9.0967%; } -.fflag-ST { background-position: center 9.32237%; } +.fflag-ST { background-position: center 9.3224%; } .fflag-SN { background-position: center 9.5426%; } .fflag-SC { background-position: left 9.7628%; } .fflag-SL { background-position: center 9.9845%; } @@ -160,7 +160,7 @@ .fflag-TM { background-position: center 32.5969%; } .fflag-VN { background-position: center 32.8186%; } .fflag-AL { background-position: center 33.0403%; } -.fflag-AD { background-position: center 33.25975%; } +.fflag-AD { background-position: center 33.2597%; } .fflag-AM { background-position: center 33.4837%; } .fflag-AT { background-position: center 33.7054%; } .fflag-BY { background-position: left 33.9271%; } @@ -251,6 +251,7 @@ .fflag-TV { background-position: center 52.7716%; } .fflag-VU { background-position: left 52.9933%; } .fflag-WF { background-position: center 53.215%; } + .fflag-TD.ff-round, .fflag-GN.ff-round, .fflag-CI.ff-round, @@ -262,17 +263,17 @@ .fflag-IT.ff-round, .fflag-RO.ff-round { background-size: 100% 50000%; } -.fflag.ff-sm { width: 18px;height: 11px } -.fflag.ff-md { width: 27px;height: 17px } -.fflag.ff-lg { width: 42px;height: 27px } -.fflag.ff-xl { width: 60px;height: 37px } +.fflag.ff-sm { width: 18px; height: 11px } +.fflag.ff-md { width: 27px; height: 17px } +.fflag.ff-lg { width: 42px; height: 27px } +.fflag.ff-xl { width: 60px; height: 37px } /* ff-round = circular icons */ -.ff-round { - background-size: 160%; - background-clip: content-box; - border-radius: 50%; - } +.ff-round { + background-size: 160%; + background-clip: content-box; + border-radius: 50%; +} .ff-round.ff-sm { width: 12px; height: 12px } .ff-round.ff-md { width: 18px; height: 18px } diff --git a/styles/globals.css b/styles/globals.css index a85f44c..29def16 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,7 +1,8 @@ +@import url("./fflag.css"); + @tailwind base; @tailwind components; @tailwind utilities; -@import url('./fflag.css'); body { background-color: #f8f9ff; @@ -9,14 +10,13 @@ body { .domKeywords { min-height: 70vh; - border-color: #E9EBFF; - box-shadow: 0 0 20px rgba(20, 34, 71, 0.05); + border-color: #e9ebff; + box-shadow: 0 0 20px rgb(20 34 71 / 5%); } - .customShadow { - border-color: #E9EBFF; - box-shadow: 0 0 20px rgba(20, 34, 71, 0.05); + border-color: #e9ebff; + box-shadow: 0 0 20px rgb(20 34 71 / 5%); } .styled-scrollbar { @@ -27,19 +27,19 @@ body { .styled-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; - border-radius: 0px; + border-radius: 0; background: #f5f7ff; margin-right: 4px; - border: 0px solid transparent; + border: 0 solid transparent; } - + .styled-scrollbar::-webkit-scrollbar-thumb { width: 6px; height: 6px; - border-radius: 0px; + border-radius: 0; color: #d6dbec; - background: #d6d8e1; - border: 0px solid transparent; + background: #d6d8e1; + border: 0 solid transparent; box-shadow: none; } @@ -56,48 +56,47 @@ body { } .chart_tooltip { - width: 95px; - height: 75px; + width: 95px; + height: 75px; background-color: white; - position: absolute; - display: none; - padding: 0 8px; - box-sizing: border-box; - font-size: 12px; - text-align: left; - z-index: 1000; - top: 12px; - left: 12px; - pointer-events: none; - border: 1px solid; + position: absolute; + display: none; + padding: 0 8px; + box-sizing: border-box; + font-size: 12px; + text-align: left; + z-index: 1000; + top: 12px; + left: 12px; + pointer-events: none; + border: 1px solid; border-radius: 4px; - border-color: #a7aed3; - box-shadow: 0 0 10px rgb(0 0 0 / 12%); - font-family: 'Trebuchet MS', Roboto, Ubuntu, sans-serif; + border-color: #a7aed3; + box-shadow: 0 0 10px rgb(0 0 0 / 12%); + font-family: "Trebuchet MS", Roboto, Ubuntu, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - .react_toaster { font-size: 13px; } -.domKeywords_head--alpha_desc .domKeywords_head_keyword:after, -.domKeywords_head--pos_desc .domKeywords_head_position:after { - content: '↓' ; - display: inline-block; - margin-left: 2px; - font-size: 14px; +.domKeywords_head--alpha_desc .domKeywords_head_keyword::after, +.domKeywords_head--pos_desc .domKeywords_head_position::after { + content: "↓"; + display: inline-block; + margin-left: 2px; + font-size: 14px; opacity: 0.8; } -.domKeywords_head--alpha_asc .domKeywords_head_keyword:after, -.domKeywords_head--pos_asc .domKeywords_head_position:after { - content: '↑' ; - display: inline-block; - margin-left: 2px; - font-size: 14px; +.domKeywords_head--alpha_asc .domKeywords_head_keyword::after, +.domKeywords_head--pos_asc .domKeywords_head_position::after { + content: "↑"; + display: inline-block; + margin-left: 2px; + font-size: 14px; opacity: 0.8; } @@ -110,7 +109,6 @@ body { overflow: auto; } - /* Animation */ .modal_anim-enter { opacity: 0; @@ -140,7 +138,7 @@ body { } .modal_anim-exit .modal__content { - transform: translateY(0px); + transform: translateY(0); } .modal_anim-exit-active .modal__content { @@ -148,7 +146,6 @@ body { transition: all 300ms; } - .settings_anim-enter { opacity: 0; transform: translateX(400px); @@ -171,14 +168,14 @@ body { transition: all 300ms; } - @media (min-width: 1024px) { /* Domain Header Button Tooltips */ - .domheader_action_button:hover i{ + .domheader_action_button:hover i { visibility: visible; opacity: 1; } - .domheader_action_button i{ + + .domheader_action_button i { display: block; position: absolute; width: 100px; @@ -191,17 +188,18 @@ body { padding-bottom: 3px; transition: all 0.2s linear; } - .domheader_action_button i:after{ + + .domheader_action_button i::after { content: ""; width: 0; height: 0; border-style: solid; - border-width: 5px 5px 0 5px; - border-color: #222 transparent transparent transparent; + border-width: 5px 5px 0; + border-color: #222 transparent transparent; bottom: -5px; position: absolute; left: 0; right: 0; margin: 0 auto; } -} \ No newline at end of file +}