diff --git a/static/css/style-instantanswer.css b/static/css/style-instantanswer.css index b31e1b9..77bd088 100644 --- a/static/css/style-instantanswer.css +++ b/static/css/style-instantanswer.css @@ -1,3 +1,7 @@ +*, *::before, *::after { + box-sizing: border-box; +} + .instant-container { position: absolute; top: 140px; @@ -38,8 +42,9 @@ } .calc-input { + box-sizing: border-box; + width: 100%; padding: 10px; - width: 95%; font-size: 18px; border: 1px solid var(--border); border-radius: 4px; @@ -265,10 +270,21 @@ } /* Responsive adjustments */ -@media only screen and (max-width: 1220px) { +@media only screen and (max-width: 1450px) { + .instant-container { + right: 75px; + } +} + +@media only screen and (max-width: 1350px) { + .instant-container { + right: 5px; + } +} + +@media only screen and (max-width: 1290px) { .instant-container { position: relative; - width: 100%; top: 0; right: 0; margin-left: 175px; diff --git a/static/css/style.css b/static/css/style.css index 2ea7783..0d0a76f 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1054,114 +1054,6 @@ p { white-space: nowrap; } -.snip { - padding: 17px; - border: 1px solid var(--snip-border); - width: 440px; - border-radius: 8px; - background: var(--snip-background); - color: var(--fg); - margin-left: 840px; - margin-top: 0px; - position: absolute; - max-width: 48em; - line-height: 1.58; - font-size: 14px; - letter-spacing: normal; -} - -.snip_title { - margin-top: 0; - margin-bottom: 0; - color: var(--highlight); - font-weight: bold; - font-style: normal; - max-width: 48em; - line-height: 1.58; - font-size: 22px; -} - -.wiki_known_for { - margin: 0px; - font-weight: normal; - margin-bottom: 10px; -} - -.snip img { - float: right; - max-width: 30%; - max-height: 150px; - padding-bottom: 10px; - margin-left: 10px; -} - -.snip .wiki_link { - margin-top: 10px; - text-decoration: none; - color: var(--link); - font-size: 14px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.snip a:hover { - text-decoration: underline; -} - -.snip .about { - font-size: 18px; - margin-top: 10px; - margin-bottom: 5px; -} - -.factpoint { - color: var(--fg); - font-weight: bold; - vertical-align: text-top; - text-align: left; - padding-right: 14px; -} - -.fact a { - color: var(--link); - text-decoration: none; -} - -.fact a:visited { - color: var(--link-visited); -} - -.snipp { - padding: 10px; - border-bottom: 1px solid var(--border); - width: 500px; - background: inherit; - color: var(--fg); - margin-left: 170px; - margin-top: 0px; - position: relative; - line-height: 1.58; - font-size: 16px; - float: none; - max-width: 48em; -} - -.snipp a { - display: block; - margin-top: 10px; - text-decoration: none; - color: var(--link); - font-size: 14px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.snipp a:hover { - text-decoration: underline; -} - .clickable { cursor: pointer; } @@ -1423,33 +1315,12 @@ button { /* Applies the background color based on theme */ } -@media only screen and (max-width: 1320px) { - - .snip { - margin-left: 780px; - } -} - -@media only screen and (max-width: 1220px) { - - .results { - padding-right: 340px; - } - - .snip { - position: relative; - float: none; - margin-left: 170px; - } -} - @media only screen and (max-width: 880px) { .settings-icon-link-search { margin-top: -15px !important; } - .snip, .no-results-found { position: relative; float: none; @@ -1474,14 +1345,6 @@ button { height: 77px; } - .snip a { - font-size: 13px; - } - - .snip_title { - font-size: 16px; - } - .settings { max-width: 100%; margin-left: 0px; @@ -1551,15 +1414,6 @@ button { max-width: 90%; } - .snipp { - position: relative; - float: none; - max-width: 90%; - margin-left: 10px; - width: auto; - font-size: 16px; - } - p { font-size: 13px; line-height: normal;