diff options
Diffstat (limited to 'examples/webenginewidgets/spellchecker/data/style.css')
-rw-r--r-- | examples/webenginewidgets/spellchecker/data/style.css | 145 |
1 files changed, 87 insertions, 58 deletions
diff --git a/examples/webenginewidgets/spellchecker/data/style.css b/examples/webenginewidgets/spellchecker/data/style.css index 7b6736f1f..38873c5a0 100644 --- a/examples/webenginewidgets/spellchecker/data/style.css +++ b/examples/webenginewidgets/spellchecker/data/style.css @@ -1,90 +1,119 @@ -.logo { - width: 50px; - height: 50px; - float: left; - margin: 20px 20px 0px 20px; - -webkit-animation:spin 8s linear infinite; +@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap'); +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + + +body { + width: 100%; + padding: 0px; + margin: 0px; } -@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } .header { - display: inline + display: inline; +} + +.main { + max-width: 100%; } .form { - width: 450px; - height: 600px; - background: -webkit-linear-gradient(bottom, #ddd, #fff); - border: 1px solid #999; - border-radius: 12px; - color: #46a; - font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; - font-size: 14px; - font-style: italic; - font-weight: bold; - margin: auto; - padding: 10px; - position: relative; - line-height: 26px; - text-decoration: none; - -webkit-box-shadow: 0px 0px 5px #444; + width: 100%; + height: 100%; + background: #fff; + border: 0px solid #999; + border-radius: 8px; + color: #46a; + font-family: 'Titillium Web', sans-serif; + font-size: 1rem; + margin: auto; + padding: 40px; + position: relative; + line-height: 26px; + text-decoration: none; } h1 { - padding-left:40px; - color: #46a2da; + padding-left: 20px; + color: #00414A; + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 1rem; } h2 { - color: #80c342; - font-size: 13px; - margin-top: -20px; + padding-left: 20px; + color: #00414A; + font-size: 1.125rem; + font-weight: 400; + font-style: italic; + margin-bottom: 1.75rem; } span { - margin-left: 20px; + font-size: 1.5rem; + margin-left: 20px; + color: #00414A; + font-weight: 700; } input { - width: 400px; - display: block; - border: 1px solid #999; - height: 25px; - margin-left: 20px; - margin-bottom: 10px; - padding-left: 10px; - -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); + width: 90%; + display: block; + height: 2.25rem; + margin-left: 20px; + margin-right: 20px; + margin-bottom: 8px; + padding-left: 10px; + box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15); + border-radius: var(--radius-radius-minimal, 0.25rem); + border: 1px solid var(--color-background-normal, #CCC); + background: var(--color-text-input-background, #FFF); } textarea { - width: 400px; - max-width: 400px; - height: 180px; - max-height: 400px; - display: block; - margin-left: 20px; - padding-left: 10px; - padding-right: 10px; - -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); + width: 90%; + max-width: 90%; + height: 10rem; + max-height: 14rem; + display: block; + margin-left: 20px; + margin-right: 20px; + padding-left: 10px; + padding-top: 10px; + box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15); + border-radius: var(--radius-radius-minimal, 0.25rem); + border: 1px solid var(--color-background-normal, #CCC); + background: var(--color-text-input-background, #FFF); } input:focus, textarea:focus { - outline:none; - border: 1px solid #46a2da; + outline: none; + border: 1px solid #00414A; } input[type=submit] { - width: 100px; - left: 170px; - bottom: 10px; - background: #46a2da; - color: #fff; - height: 30px; - position: absolute; - border-radius: 14px; + display: flex; + align-items: center; + justify-content: center; /* Add this to horizontally center the content */ + padding: 0.4444em 0.8889em; + height: 2.4em; + cursor: pointer; + width: 6.5rem; + background: #00414A; + color: #fff; + border-radius: 4px; + margin-top: 28px; + font-family: 'Titillium Web', sans-serif; + font-size: 1.125rem; + font-weight: 400; + transition: color 300ms ease-out, border 300ms ease-out; } input[type=submit]:hover { - background: #80c342; + background: #19545C; } |