search

mattgrayisok / craft-dark-mode

Dark Mode for Craft CMS
MIT License
13 stars 2 forks source link

CSS for textarea and input #5

Closed richhayler closed 5 years ago

richhayler commented 5 years ago

Coincidentally I have been working on a similar plugin with very much the same colour scheme :) I used the following styling for textarea and input fields which looks great IMO so thought I would suggest it:

{ background-color: #111 !important; color: #555; border-color: #111 !important; -webkit-box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(255,255,255,0.1); box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(255,255,255,0.1); }

screen shot 2018-12-20 at 3 52 11 am
richhayler commented 5 years ago

Try this:

`textarea, .text:not(.selectize-text), .text:not(.fullwidth), .border-box, .matrix-configurator>.field>.input, .selectize-text>.selectize-control>.selectize-input, .redactor-box, .cm-s-a.CodeMirror { background-color: #111 !important; color: #555; border-color: #111 !important; -webkit-box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(255,255,255,0.1) !important; box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(255,255,255,0.1) !important; }

main-container #main #main-content #details .text {background: #202020 !important;}

.input .redactor-styles {color: #555 !important;} .redactor-toolbar a.re-button-icon, .redactor-toolbar a.re-button-icon:hover {background: #333 !important; color: #666 !important;} .input .redactor-toolbar {border-color: #333 !important;} .input .redactor-box.focus:not(.redactor-box-fullscreen){border-color: #444 !important;} .input.focus, .input:focus {outline: none;} .redactor-box.redactor-styles-on {border: none;}

main-container #main #main-content #details .meta>.field>.heading>label, #main-container #main #main-content #details .meta>.field>.heading, #main-container #main #main-content #details .meta>.data>.heading>label, #main-container #main #main-content #details .meta>.data>.heading {color: #555;}

body.ltr #main-container #main #main-content #content-container #tabs ul li a.sel:after {background: none;}

body.ltr #main-container #main #main-content #content-container #tabs ul li a:after { background: #202020;}`

mattgrayisok commented 5 years ago

Awsome. This is nice. I'm just going to make some tweaks to the colours and add styling for a few modals and drop downs but I'll use your suggestion as a base.

Should get this added today :+1:

mattgrayisok commented 5 years ago

Released in v1.0.1