Last active
May 31, 2019 02:40
-
-
Save dariodev/bd5bb6f335da605cc3538f87baa8f4ab to your computer and use it in GitHub Desktop.
Styling WP Subscribe widget for Themelia theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Style for WP Subscribe | |
| * to match Themelia theme | |
| * | |
| * (NOTE: remove <br> and <span> tags from widget -> Labels -> Title) | |
| */ | |
| .widget #wp-subscribe { | |
| background-color: rgba(34, 34, 42, .055); | |
| padding: 1.5rem; | |
| } | |
| .widget #wp-subscribe, | |
| .widget #wp-subscribe input { | |
| font-size: 95%; | |
| } | |
| .widget #wp-subscribe h4.title { | |
| font-size: 1.777em; | |
| color: #22222a; | |
| font-weight: 700; | |
| font-style: normal; | |
| line-height: 1.2; | |
| text-align: inherit; | |
| text-transform: none; | |
| margin-top: 0; | |
| margin-bottom: .4em; | |
| padding-bottom: .4em; | |
| } | |
| .widget #wp-subscribe p.text { | |
| color: #22222a; | |
| margin-top: 0 !important; | |
| margin-bottom: 1rem !important; | |
| opacity: 1 !important; | |
| text-align: inherit; | |
| line-height: 1.6; | |
| font-size: 95%; | |
| } | |
| .widget #wp-subscribe p.footer-text { | |
| color: #22222a; | |
| margin-top: 0; | |
| font-size: 0.855em; | |
| line-height: 1.3; | |
| opacity: .85; | |
| text-align: inherit; | |
| } | |
| .widget #wp-subscribe input.email-field, | |
| .widget #wp-subscribe input.name-field { | |
| color: #22222a; | |
| background: rgba(39, 55, 64, 0.075); | |
| border: 1px solid rgba(39, 55, 64, 0.1); | |
| text-align: left; | |
| padding: 10px; | |
| } | |
| .widget #wp-subscribe input.submit { | |
| -webkit-appearance: none; | |
| background: #00823B; | |
| border: 1px solid #00823B; | |
| border-radius: 3px; | |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); | |
| color: #fff; | |
| display: inline-block; | |
| font-family: inherit; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| letter-spacing: .075em; | |
| line-height: normal; | |
| margin-top: 1rem; | |
| margin-bottom: 0; | |
| outline: none; | |
| padding: .686em 1.25em .686em; | |
| overflow: hidden; | |
| will-change: box-shadow; | |
| transition: box-shadow .2s cubic-bezier(.4, 0, 1, 1), background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1); | |
| vertical-align: middle; | |
| white-space: nowrap; | |
| } | |
| .widget #wp-subscribe input.submit:hover { | |
| box-shadow: 0 0 0 150px rgba(255, 255, 255, 0.05) inset, 0 2px 3px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| .widget #wp-subscribe input.submit:active { | |
| box-shadow: 0 0 0 150px rgba(255, 255, 255, 0.2) inset, 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2); | |
| color: #fff; | |
| outline: none; | |
| } | |
| .widget #wp-subscribe input.submit:focus { | |
| box-shadow: 0 0 0 150px rgba(255, 255, 255, 0.075) inset, 0 0 8px rgba(0, 0, 0, .18), 0 8px 16px rgba(0, 0, 0, .36); | |
| color: #fff; | |
| outline: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How to change mythemeshop free plugin WP Subscribe only background color?