diff --git a/epicyon-profile.css b/epicyon-profile.css index c930de779..5855f064a 100644 --- a/epicyon-profile.css +++ b/epicyon-profile.css @@ -490,7 +490,7 @@ input[type=text], select, textarea { margin-top: 6px; margin-bottom: 16px; resize: vertical; - font-size: 18px; + font-size: 24px; background-color: var(--main-bg-color-reply); color: var(--main-fg-color); } @@ -657,37 +657,37 @@ input[type=checkbox] } .slider { - -webkit-appearance: none; - width: 57%; - height: 25px; - background: #d3d3d3; - outline: none; - opacity: 0.7; - -webkit-transition: .2s; - transition: opacity .2s; - float: right; - margin: 5px 0; - padding: 12px 0; + -webkit-appearance: none; + width: 57%; + height: 25px; + background: #d3d3d3; + outline: none; + opacity: 0.7; + -webkit-transition: .2s; + transition: opacity .2s; + float: right; + margin: 5px 0; + padding: 12px 0; } .slider:hover { - opacity: 1; + opacity: 1; } .slider::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 25px; - height: 25px; - background: var(--main-bg-color); - cursor: pointer; + -webkit-appearance: none; + appearance: none; + width: 25px; + height: 25px; + background: var(--main-bg-color); + cursor: pointer; } .slider::-moz-range-thumb { - width: 25px; - height: 25px; - background: var(--main-bg-color); - cursor: pointer; + width: 25px; + height: 25px; + background: var(--main-bg-color); + cursor: pointer; } .dropbtn { @@ -709,157 +709,183 @@ input[type=checkbox] } @media screen and (min-width: 400px) { - body, html { - font-size: 22px; - } - .container img { - float: left; - max-width: 400px; - width: 5%; - padding: 0px 7px; - margin-right: 20px; - border-radius: 10%; - } - .containericons img { - float: right; - max-width: 200px; - width: 3%; - margin: 0px 1%; - border-radius: 0%; - } - .timeline-avatar img { - opacity: 1.0; - width: 8%; - height: 8%; - padding: 0px 0px; - -ms-transform: translateY(-10%); - transform: translateY(-10%); - } - .cwButton { - border-radius: 4px; - background-color: #555; - border: none; - color: #FFFFFF; - text-align: center; - font-size: 20px; - padding: 2px; - cursor: pointer; - margin: 5px; - } - .button { - border-radius: 4px; - background-color: #999; - border: none; - color: #FFFFFF; - text-align: center; - font-size: 18px; - padding: 10px; - width: 10%; - max-width: 100px; - min-width: 80px; - transition: all 0.5s; - cursor: pointer; - margin: 5px; - } - .buttonselected { - border-radius: 4px; - background-color: #666; - border: none; - color: #FFFFFF; - text-align: center; - font-size: 18px; - padding: 10px; - width: 10%; - max-width: 100px; - min-width: 80px; - transition: all 0.5s; - cursor: pointer; - margin: 5px; - } - .pageicon { - width: 4%; - } - .time-right { - float: right; - color: #aaa; - margin: 4px 20px; - } + body, html { + font-size: 22px; + } + .container img { + float: left; + max-width: 400px; + width: 5%; + padding: 0px 7px; + margin-right: 20px; + border-radius: 10%; + } + .containericons img { + float: right; + max-width: 200px; + width: 3%; + margin: 0px 1%; + border-radius: 0%; + } + .timeline-avatar img { + opacity: 1.0; + width: 8%; + height: 8%; + padding: 0px 0px; + -ms-transform: translateY(-10%); + transform: translateY(-10%); + } + .cwButton { + border-radius: 4px; + background-color: #555; + border: none; + color: #FFFFFF; + text-align: center; + font-size: 20px; + padding: 2px; + cursor: pointer; + margin: 5px; + } + .button { + border-radius: 4px; + background-color: #999; + border: none; + color: #FFFFFF; + text-align: center; + font-size: 18px; + padding: 10px; + width: 10%; + max-width: 100px; + min-width: 80px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; + } + .buttonselected { + border-radius: 4px; + background-color: #666; + border: none; + color: #FFFFFF; + text-align: center; + font-size: 18px; + padding: 10px; + width: 10%; + max-width: 100px; + min-width: 80px; + transition: all 0.5s; + cursor: pointer; + margin: 5px; + } + .pageicon { + width: 4%; + } + .time-right { + float: right; + color: #aaa; + margin: 4px 20px; + } + input[type=text], select, textarea { + width: 100%; + padding: 12px; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + margin-top: 6px; + margin-bottom: 16px; + resize: vertical; + font-size: 24px; + background-color: var(--main-bg-color-reply); + color: var(--main-fg-color); + } } @media screen and (max-width: 1000px) { - body, html { - font-size: 35px; - } - .container img { - float: left; - max-width: 400px; - width: 15%; - padding: 0px 7px; - margin-right: 20px; - border-radius: 10%; - } - .containericons img { - float: right; - max-width: 200px; - width: 7%; - margin: 1% 3%; - border-radius: 0%; - } - .timeline-avatar img { - opacity: 1.0; - width: 15%; - height: 15%; - padding: 0px 0px; - -ms-transform: translateY(-10%); - transform: translateY(-10%); - } - .cwButton { - border-radius: 4px; - background-color: #555; - border: none; - color: #FFFFFF; - text-align: center; - font-size: 32px; - padding: 2px; - cursor: pointer; - margin: 5px; - } - .button { - border-radius: 4px; - background-color: #999; - border: none; - color: #FFFFFF; - text-align: center; - font-size: 32px; - padding: 10px; - width: 20%; - max-width: 400px; - min-width: 80px; - transition: all 0.5s; - cursor: pointer; - margin: 15px; - } - .buttonselected { - border-radius: 4px; - background-color: #666; - border: none; - color: #FFFFFF; - text-align: center; - font-size: 32px; - padding: 10px; - width: 20%; - max-width: 400px; - min-width: 80px; - transition: all 0.5s; - cursor: pointer; - margin: 15px; - } - .pageicon { - width: 8%; - } - .time-right { - float: right; - color: #aaa; - margin: 25px 20px; - } + body, html { + font-size: 35px; + } + .container img { + float: left; + max-width: 400px; + width: 15%; + padding: 0px 7px; + margin-right: 20px; + border-radius: 10%; + } + .containericons img { + float: right; + max-width: 200px; + width: 7%; + margin: 1% 3%; + border-radius: 0%; + } + .timeline-avatar img { + opacity: 1.0; + width: 15%; + height: 15%; + padding: 0px 0px; + -ms-transform: translateY(-10%); + transform: translateY(-10%); + } + .cwButton { + border-radius: 4px; + background-color: #555; + border: none; + color: #FFFFFF; + text-align: center; + font-size: 32px; + padding: 2px; + cursor: pointer; + margin: 5px; + } + .button { + border-radius: 4px; + background-color: #999; + border: none; + color: #FFFFFF; + text-align: center; + font-size: 32px; + padding: 10px; + width: 20%; + max-width: 400px; + min-width: 80px; + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .buttonselected { + border-radius: 4px; + background-color: #666; + border: none; + color: #FFFFFF; + text-align: center; + font-size: 32px; + padding: 10px; + width: 20%; + max-width: 400px; + min-width: 80px; + transition: all 0.5s; + cursor: pointer; + margin: 15px; + } + .pageicon { + width: 8%; + } + .time-right { + float: right; + color: #aaa; + margin: 25px 20px; + } + input[type=text], select, textarea { + width: 100%; + padding: 12px; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + margin-top: 6px; + margin-bottom: 16px; + resize: vertical; + font-size: 35px; + background-color: var(--main-bg-color-reply); + color: var(--main-fg-color); + } }