/*! * # Fomantic-UI 2.9.0 - Input * http://github.com/fomantic/Fomantic-UI/ * * * Released under the MIT license * http://opensource.org/licenses/MIT * */ /******************************* Standard *******************************/ /*-------------------- Inputs ---------------------*/ .ui.input { position: relative; font-weight: normal; font-style: normal; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: rgba(0, 0, 0, 0.87); } .ui.input > input { margin: 0; max-width: 100%; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); text-align: left; line-height: 1.21428571em; font-family: 'Raleway', sans-serif; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); color: rgba(0, 0, 0, 0.87); border-radius: 0.28571429rem; -webkit-transition: border-color 0.1s ease, -webkit-box-shadow 0.1s ease; transition: border-color 0.1s ease, -webkit-box-shadow 0.1s ease; transition: box-shadow 0.1s ease, border-color 0.1s ease; transition: box-shadow 0.1s ease, border-color 0.1s ease, -webkit-box-shadow 0.1s ease; -webkit-box-shadow: none; box-shadow: none; } .ui.input > input:not([type="color"]) { padding: 0.67857143em 1em; } .ui.input > input::-webkit-calendar-picker-indicator { padding: 0; opacity: 0.5; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; cursor: pointer; } /*-------------------- Placeholder ---------------------*/ /* browsers require these rules separate */ .ui.input > input::-webkit-input-placeholder { color: rgba(191, 191, 191, 0.87); } .ui.input > input::-moz-placeholder { color: rgba(191, 191, 191, 0.87); opacity: 1; } /******************************* States *******************************/ /*-------------------- Disabled ---------------------*/ .ui.disabled.input, .ui.input:not(.disabled) input[disabled] { opacity: 0.45; } .ui.disabled.input > input, .ui.input:not(.disabled) input[disabled] { pointer-events: none; } /*-------------------- Active ---------------------*/ .ui.input > input:active, .ui.input.down input { border-color: rgba(0, 0, 0, 0.3); background: #FAFAFA; color: rgba(0, 0, 0, 0.87); -webkit-box-shadow: none; box-shadow: none; } /*-------------------- Loading ---------------------*/ .ui.loading.loading.input > i.icon::before { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.64285714em 0 0 -0.64285714em; width: 1.28571429em; height: 1.28571429em; border-radius: 500rem; border: 0.2em solid rgba(0, 0, 0, 0.1); } .ui.loading.loading.input > i.icon::after { position: absolute; content: ''; top: 50%; left: 50%; margin: -0.64285714em 0 0 -0.64285714em; width: 1.28571429em; height: 1.28571429em; -webkit-animation: loader 0.6s infinite linear; animation: loader 0.6s infinite linear; border: 0.2em solid #767676; border-radius: 500rem; -webkit-box-shadow: 0 0 0 1px transparent; box-shadow: 0 0 0 1px transparent; } /*-------------------- Focus ---------------------*/ .ui.input.focus > input, .ui.input > input:focus { border-color: #a285df; background: #FFFFFF; color: rgba(0, 0, 0, 0.8); -webkit-box-shadow: none; box-shadow: none; } .ui.input.focus > input::-webkit-input-placeholder, .ui.input > input:focus::-webkit-input-placeholder { color: rgba(115, 115, 115, 0.87); } .ui.input.focus > input::-moz-placeholder, .ui.input > input:focus::-moz-placeholder { color: rgba(115, 115, 115, 0.87); } /*-------------------- States ---------------------*/ .ui.input.error > input { background-color: #FFF6F6; border-color: #E0B4B4; color: #9F3A38; -webkit-box-shadow: none; box-shadow: none; } .ui.input > input:not(:-moz-placeholder-shown):invalid { background-color: #FFF6F6; border-color: #E0B4B4; color: #9F3A38; box-shadow: none; } .ui.input > input:not(:-ms-input-placeholder):invalid { background-color: #FFF6F6; border-color: #E0B4B4; color: #9F3A38; box-shadow: none; } .ui.input > input:not(:placeholder-shown):invalid { background-color: #FFF6F6; border-color: #E0B4B4; color: #9F3A38; -webkit-box-shadow: none; box-shadow: none; } /* Placeholder */ .ui.input.error > input::-webkit-input-placeholder { color: #e7bdbc; } .ui.input.error > input::-moz-placeholder { color: #e7bdbc; } /* Focused Placeholder */ .ui.input.error > input:focus::-webkit-input-placeholder { color: #da9796; } .ui.input.error > input:focus::-moz-placeholder { color: #da9796; } .ui.input.info > input { background-color: #F8FFFF; border-color: #A9D5DE; color: #276F86; -webkit-box-shadow: none; box-shadow: none; } /* Placeholder */ .ui.input.info > input::-webkit-input-placeholder { color: #98cfe1; } .ui.input.info > input::-moz-placeholder { color: #98cfe1; } /* Focused Placeholder */ .ui.input.info > input:focus::-webkit-input-placeholder { color: #70bdd6; } .ui.input.info > input:focus::-moz-placeholder { color: #70bdd6; } .ui.input.success > input { background-color: #FCFFF5; border-color: #A3C293; color: #2C662D; -webkit-box-shadow: none; box-shadow: none; } /* Placeholder */ .ui.input.success > input::-webkit-input-placeholder { color: #8fcf90; } .ui.input.success > input::-moz-placeholder { color: #8fcf90; } /* Focused Placeholder */ .ui.input.success > input:focus::-webkit-input-placeholder { color: #6cbf6d; } .ui.input.success > input:focus::-moz-placeholder { color: #6cbf6d; } .ui.input.warning > input { background-color: #FFFAF3; border-color: #C9BA9B; color: #573A08; -webkit-box-shadow: none; box-shadow: none; } /* Placeholder */ .ui.input.warning > input::-webkit-input-placeholder { color: #edad3e; } .ui.input.warning > input::-moz-placeholder { color: #edad3e; } /* Focused Placeholder */ .ui.input.warning > input:focus::-webkit-input-placeholder { color: #e39715; } .ui.input.warning > input:focus::-moz-placeholder { color: #e39715; } /******************************* Variations *******************************/ /*-------------------- Transparent ---------------------*/ .ui.transparent.input > textarea, .ui.transparent.input > input { border-color: transparent !important; background-color: transparent !important; padding: 0; -webkit-box-shadow: none !important; box-shadow: none !important; border-radius: 0 !important; } .field .ui.transparent.input > textarea { padding: 0.67857143em 1em; } /* Transparent Icon */ :not(.field) > .ui.transparent.icon.input > i.icon { width: 1.1em; } :not(.field) > .ui.ui.ui.transparent.icon.input > input { padding-left: 0; padding-right: 2em; } :not(.field) > .ui.ui.ui.transparent[class*="left icon"].input > input { padding-left: 2em; padding-right: 0; } /* Transparent Inverted */ .ui.transparent.inverted.input { color: #FFFFFF; } .ui.ui.transparent.inverted.input > textarea, .ui.ui.transparent.inverted.input > input { color: inherit; } .ui.transparent.inverted.input > input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5); } .ui.transparent.inverted.input > input::-moz-placeholder { color: rgba(255, 255, 255, 0.5); } /*-------------------- Icon ---------------------*/ .ui.icon.input > i.icon { cursor: default; position: absolute; line-height: 1; text-align: center; top: 0; right: 0; margin: 0; height: 100%; width: 2.67142857em; opacity: 0.5; border-radius: 0 0.28571429rem 0.28571429rem 0; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .ui.icon.input > i.icon:not(.link) { pointer-events: none; } .ui.ui.ui.ui.icon.input:not(.corner) > textarea, .ui.ui.ui.ui.icon.input:not(.corner) > input { padding-right: 2.67142857em; } .ui.icon.input > i.icon::before, .ui.icon.input > i.icon::after { left: 0; position: absolute; text-align: center; top: 50%; width: 100%; margin-top: -0.5em; } .ui.icon.input > i.link.icon { cursor: pointer; } .ui.icon.input > i.circular.icon { top: 0.35em; right: 0.5em; } /* Left Icon Input */ .ui[class*="left icon"].input > i.icon { right: auto; left: 1px; border-radius: 0.28571429rem 0 0 0.28571429rem; } .ui[class*="left icon"].input > i.circular.icon { right: auto; left: 0.5em; } .ui.ui.ui.ui[class*="left icon"]:not([class*="left corner"]).input > textarea, .ui.ui.ui.ui[class*="left icon"]:not([class*="left corner"]).input > input { padding-left: 2.67142857em; } .ui.ui.ui.ui[class*="left icon"]:not(.corner).input > textarea, .ui.ui.ui.ui[class*="left icon"]:not(.corner).input > input { padding-right: 1em; } /* Focus */ .ui.input > input:focus::-webkit-calendar-picker-indicator, .ui.icon.input > textarea:focus ~ i.icon, .ui.icon.input > input:focus ~ i.icon { opacity: 1; } /*-------------------- Labeled ---------------------*/ /* Adjacent Label */ .ui.labeled.input > .label { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0; font-size: 1em; } .ui.labeled.input > .label:not(.corner) { padding-top: 0.78571429em; padding-bottom: 0.78571429em; } /* Regular Label on Left */ .ui.labeled.input:not([class*="corner labeled"]) .label:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: transparent; } .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus { border-left-color: #a285df; } /* Regular Label on Right */ .ui[class*="right labeled"].input > input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right-color: transparent !important; } .ui[class*="right labeled"].input > input + .label { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ui[class*="right labeled"].input > input:focus { border-right-color: #a285df !important; } /* Corner Label */ .ui.labeled.input .corner.label { top: 1px; right: 1px; font-size: 0.64285714em; border-radius: 0 0.28571429rem 0 0; } /* Spacing with corner label */ .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown, .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > textarea, .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > input { padding-right: 2.5em; } .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .ui.dropdown, .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > textarea, .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input { padding-right: 3.25em; } .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > i.icon { margin-right: 1.25em; } /* Left Labeled */ .ui[class*="left icon"].input > .ui.dropdown, .ui[class*="left corner labeled"].input > .ui.dropdown, .ui[class*="left corner labeled"].input > textarea, .ui[class*="left corner labeled"].input > input { padding-left: 2.5em; } .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > .ui.dropdown, .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > textarea, .ui[class*="corner labeled"]:not([class*="left corner labeled"])[class*="left icon"].input > input { padding-right: 3.25em; } .ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown, .ui[class*="left corner labeled"][class*="left icon"].input > textarea, .ui[class*="left corner labeled"][class*="left icon"].input > input { padding-left: 4em; } .ui[class*="left corner labeled"].icon.input > i.icon { margin-left: 1.25em; } .ui[class*="left corner labeled"].icon:not([class*="left icon"]).input > input { padding-right: 2.5em; } .ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > input { padding-right: 5em; } .ui[class*="left icon"].input > .ui.dropdown > .search, .ui[class*="left corner labeled"].input > .ui.dropdown > .search { padding-left: 2.5em; } .ui[class*="left icon"].input > .ui.dropdown > .menu, .ui[class*="left corner labeled"].input > .ui.dropdown > .menu { padding-left: 1.25em; } .ui[class*="left icon"].input > .ui.dropdown > .menu > .item, .ui[class*="left corner labeled"].input > .ui.dropdown > .menu > .item { padding-left: 2.5em; margin-left: -1.25em; } .ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown > .search { padding-left: 4em; } .ui[class*="left corner labeled"][class*="left icon"].input > .ui.dropdown > .menu > .item { padding-left: 4em; } .ui.icon.input:not([class*="left icon"]) > .ui.dropdown > .search, .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown > .search { padding-right: 5.75em; } .ui.icon.input:not([class*="left icon"]) > .ui.dropdown > .remove.icon, .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown > .remove.icon, .ui.icon.input:not([class*="left icon"]) > .ui.dropdown > .dropdown.icon, .ui[class*="corner labeled"]:not([class*="left corner labeled"]).input > .ui.dropdown > .dropdown.icon { padding-right: 2.5em; } .ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown > .search { padding-right: 7.25em; } .ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown > .remove.icon, .ui[class*="corner labeled"]:not([class*="left corner labeled"]).icon:not([class*="left icon"]).input > .ui.dropdown > .dropdown.icon { padding-right: 4em; } .ui.icon.input > .ui.visible.dropdown ~ i.icon, .ui.icon.input > .ui.active.dropdown ~ i.icon, .ui[class*="corner labeled"].input > .ui.visible.dropdown ~ .ui.corner.label, .ui[class*="corner labeled"].input > .ui.active.dropdown ~ .ui.corner.label { z-index: 10; } .ui.icon.input > textarea ~ i.icon { height: 3em; } :not(.field) > .ui.transparent.icon.input > textarea ~ i.icon { height: 1.3em; } /* Corner Label Position */ .ui.input > .ui.corner.label { top: 1px; right: 1px; } .ui.input > .ui.left.corner.label { right: auto; left: 1px; } /* Labeled and action input states */ .ui.form .field.error > .ui.action.input > .ui.button, .ui.form .field.error > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, .ui.action.input.error > .ui.button, .ui.labeled.input.error:not([class*="corner labeled"]) > .ui.label { border-top: 1px solid #E0B4B4; border-bottom: 1px solid #E0B4B4; } .ui.form .field.error > .ui[class*="left action"].input > .ui.button, .ui.form .field.error > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, .ui[class*="left action"].input.error > .ui.button, .ui.labeled.input.error:not(.right):not([class*="corner labeled"]) > .ui.label { border-left: 1px solid #E0B4B4; } .ui.form .field.error > .ui.action.input:not([class*="left action"]) > input + .ui.button, .ui.form .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, .ui.action.input.error:not([class*="left action"]) > input + .ui.button, .ui.right.labeled.input.error:not([class*="corner labeled"]) > input + .ui.label { border-right: 1px solid #E0B4B4; } .ui.form .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, .ui.right.labeled.input.error:not([class*="corner labeled"]) > .ui.label:first-child { border-left: 1px solid #E0B4B4; } .ui.form .field.info > .ui.action.input > .ui.button, .ui.form .field.info > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, .ui.action.input.info > .ui.button, .ui.labeled.input.info:not([class*="corner labeled"]) > .ui.label { border-top: 1px solid #A9D5DE; border-bottom: 1px solid #A9D5DE; } .ui.form .field.info > .ui[class*="left action"].input > .ui.button, .ui.form .field.info > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, .ui[class*="left action"].input.info > .ui.button, .ui.labeled.input.info:not(.right):not([class*="corner labeled"]) > .ui.label { border-left: 1px solid #A9D5DE; } .ui.form .field.info > .ui.action.input:not([class*="left action"]) > input + .ui.button, .ui.form .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, .ui.action.input.info:not([class*="left action"]) > input + .ui.button, .ui.right.labeled.input.info:not([class*="corner labeled"]) > input + .ui.label { border-right: 1px solid #A9D5DE; } .ui.form .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, .ui.right.labeled.input.info:not([class*="corner labeled"]) > .ui.label:first-child { border-left: 1px solid #A9D5DE; } .ui.form .field.success > .ui.action.input > .ui.button, .ui.form .field.success > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, .ui.action.input.success > .ui.button, .ui.labeled.input.success:not([class*="corner labeled"]) > .ui.label { border-top: 1px solid #A3C293; border-bottom: 1px solid #A3C293; } .ui.form .field.success > .ui[class*="left action"].input > .ui.button, .ui.form .field.success > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, .ui[class*="left action"].input.success > .ui.button, .ui.labeled.input.success:not(.right):not([class*="corner labeled"]) > .ui.label { border-left: 1px solid #A3C293; } .ui.form .field.success > .ui.action.input:not([class*="left action"]) > input + .ui.button, .ui.form .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, .ui.action.input.success:not([class*="left action"]) > input + .ui.button, .ui.right.labeled.input.success:not([class*="corner labeled"]) > input + .ui.label { border-right: 1px solid #A3C293; } .ui.form .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, .ui.right.labeled.input.success:not([class*="corner labeled"]) > .ui.label:first-child { border-left: 1px solid #A3C293; } .ui.form .field.warning > .ui.action.input > .ui.button, .ui.form .field.warning > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, .ui.action.input.warning > .ui.button, .ui.labeled.input.warning:not([class*="corner labeled"]) > .ui.label { border-top: 1px solid #C9BA9B; border-bottom: 1px solid #C9BA9B; } .ui.form .field.warning > .ui[class*="left action"].input > .ui.button, .ui.form .field.warning > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, .ui[class*="left action"].input.warning > .ui.button, .ui.labeled.input.warning:not(.right):not([class*="corner labeled"]) > .ui.label { border-left: 1px solid #C9BA9B; } .ui.form .field.warning > .ui.action.input:not([class*="left action"]) > input + .ui.button, .ui.form .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, .ui.action.input.warning:not([class*="left action"]) > input + .ui.button, .ui.right.labeled.input.warning:not([class*="corner labeled"]) > input + .ui.label { border-right: 1px solid #C9BA9B; } .ui.form .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, .ui.right.labeled.input.warning:not([class*="corner labeled"]) > .ui.label:first-child { border-left: 1px solid #C9BA9B; } /*-------------------- Action ---------------------*/ .ui.action.input > .button, .ui.action.input > .buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .ui.action.input > .button, .ui.action.input > .buttons > .button { padding-top: 0.78571429em; padding-bottom: 0.78571429em; margin: 0; } /* Input when ui Left*/ .ui[class*="left action"].input > input { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-color: transparent; } /* Input when ui Right*/ .ui.action.input:not([class*="left action"]) > input { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-color: transparent; } /* Button and Dropdown */ .ui.action.input > .dropdown:first-child, .ui.action.input > .button:first-child, .ui.action.input > .buttons:first-child > .button { border-radius: 0.28571429rem 0 0 0.28571429rem; } .ui.action.input > .dropdown:not(:first-child), .ui.action.input > .button:not(:first-child), .ui.action.input > .buttons:not(:first-child) > .button { border-radius: 0; } .ui.action.input > .dropdown:last-child, .ui.action.input > .button:last-child, .ui.action.input > .buttons:last-child > .button { border-radius: 0 0.28571429rem 0.28571429rem 0; } /* Input Focus */ .ui.action.input:not([class*="left action"]) > input:focus { border-right-color: #a285df; } .ui.ui[class*="left action"].input > input:focus { border-left-color: #a285df; } /*-------------------- Inverted ---------------------*/ /* Standard */ .ui.inverted.input > input { border: none; } /*-------------------- Fluid ---------------------*/ .ui.fluid.input { display: -webkit-box; display: -ms-flexbox; display: flex; } .ui.fluid.input > input { width: 0 !important; } /*-------------------- File ---------------------*/ /* width hack for chrome/edge */ .ui.file.input { width: 100%; } .ui.file.input input[type="file"] { width: 0; } .ui.form .field > input[type="file"], .ui.file.input:not(.action) input[type="file"] { padding: 0; } .ui.action.file.input input[type="file"]::-webkit-file-upload-button { display: none; } .ui.form .field input[type="file"]::-webkit-file-upload-button, .ui.file.input input[type="file"]::-webkit-file-upload-button { border: none; cursor: pointer; padding: 0.67857143em 1em; margin-right: 1em; background: #e0e1e2; font-weight: bold; color: rgba(0, 0, 0, 0.6); } .ui.form .field input[type="file"]::-webkit-file-upload-button:hover, .ui.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #cacbcd; color: rgba(0, 0, 0, 0.6); } .ui.action.file.input input[type="file"]::file-selector-button { display: none; } .ui.form .field input[type="file"]::file-selector-button, .ui.file.input input[type="file"]::file-selector-button { border: none; cursor: pointer; padding: 0.67857143em 1em; margin-right: 1em; background: #e0e1e2; font-weight: bold; color: rgba(0, 0, 0, 0.6); } .ui.form .field input[type="file"]::file-selector-button:hover, .ui.file.input input[type="file"]::file-selector-button:hover { background: #cacbcd; color: rgba(0, 0, 0, 0.6); } .ui.form .field input[type="file"]:required:invalid, .ui.file.input input[type="file"]:required:invalid { color: #9F3A38; background: #FFF6F6; border-color: #E0B4B4; } input[type="file"].ui.invisible.file.input, .ui.invisible.file.input input[type="file"] { left: -99999px; position: absolute; } input[type="file"].ui.file.input:focus + label.ui.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.button:not(.basic):not(.tertiary) { background: #cacbcd; color: rgba(0, 0, 0, 0.8); } input[type="file"].ui.file.input:focus + label.ui.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.button:not(.basic):not(.tertiary).inverted { background: #FFFFFF; } /* this is related to existing buttons, so the button color variable is used here! */ input[type="file"].ui.file.input:focus + label.ui.primary.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.primary.button:not(.basic):not(.tertiary) { background-color: #5829bb; color: #FFFFFF; } input[type="file"].ui.file.input:focus + label.ui.primary.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.primary.button:not(.basic):not(.tertiary).inverted { background-color: #745aff; } input[type="file"].ui.file.input:focus + label.ui.secondary.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.secondary.button:not(.basic):not(.tertiary) { background-color: #27292a; color: #FFFFFF; } input[type="file"].ui.file.input:focus + label.ui.secondary.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.secondary.button:not(.basic):not(.tertiary).inverted { background-color: #6e6e6e; } input[type="file"].ui.file.input:focus + label.ui.red.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.red.button:not(.basic):not(.tertiary) { background-color: #d01919; color: #FFFFFF; } input[type="file"].ui.file.input:focus + label.ui.red.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.red.button:not(.basic):not(.tertiary).inverted { background-color: #ff392b; } input[type="file"].ui.file.input:focus + label.ui.orange.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.orange.button:not(.basic):not(.tertiary) { background-color: #f26202; color: #FFFFFF; } input[type="file"].ui.file.input:focus + label.ui.orange.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.orange.button:not(.basic):not(.tertiary).inverted { background-color: #e76b00; } input[type="file"].ui.file.input:focus + label.ui.yellow.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.yellow.button:not(.basic):not(.tertiary) { background-color: #eaae00; color: #FFFFFF; } input[type="file"].ui.file.input:focus + label.ui.yellow.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.yellow.button:not(.basic):not(.tertiary).inverted { background-color: #ebcd00; } input[type="file"].ui.file.input:focus + label.ui.olive.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.olive.button:not(.basic):not(.tertiary) { background-color: #a7bd0d; color: #FFFFFF; } input[type="file"].ui.file.input:focus + label.ui.olive.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.olive.button:not(.basic):not(.tertiary).inverted { background-color: #d2e745; } input[type="file"].ui.file.input:focus + label.ui.green.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.green.button:not(.basic):not(.tertiary) { background-color: #16ab39; color: #FFFFFF; } input[type="file"].ui.file.input:focus + label.ui.green.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.green.button:not(.basic):not(.tertiary).inverted { background-color: #1ea92e; } input[type="file"].ui.file.input:focus + label.ui.teal.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.teal.button:not(.basic):not(.tertiary) { background-color: #009c95; color: #FFFFFF; } input[type="file"].ui.file.input:focus + label.ui.teal.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.teal.button:not(.basic):not(.tertiary).inverted { background-color: #3affff; } input[type="file"].ui.file.input:focus + label.ui.blue.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.blue.button:not(.basic):not(.tertiary) { background-color: #1678c2; color: #FFFFFF; } input[type="file"].ui.file.input:focus + label.ui.blue.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.blue.button:not(.basic):not(.tertiary).inverted { background-color: #21b8ff; } input[type="file"].ui.file.input:focus + label.ui.violet.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.violet.button:not(.basic):not(.tertiary) { background-color: #5829bb; color: #FFFFFF; } input[type="file"].ui.file.input:focus + label.ui.violet.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.violet.button:not(.basic):not(.tertiary).inverted { background-color: #745aff; } input[type="file"].ui.file.input:focus + label.ui.purple.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.purple.button:not(.basic):not(.tertiary) { background-color: #9627ba; color: #FFFFFF; } input[type="file"].ui.file.input:focus + label.ui.purple.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.purple.button:not(.basic):not(.tertiary).inverted { background-color: #cf40ff; } input[type="file"].ui.file.input:focus + label.ui.pink.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.pink.button:not(.basic):not(.tertiary) { background-color: #e61a8d; color: #FFFFFF; } input[type="file"].ui.file.input:focus + label.ui.pink.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.pink.button:not(.basic):not(.tertiary).inverted { background-color: #ff5bd1; } input[type="file"].ui.file.input:focus + label.ui.brown.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.brown.button:not(.basic):not(.tertiary) { background-color: #975b33; color: #FFFFFF; } input[type="file"].ui.file.input:focus + label.ui.brown.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.brown.button:not(.basic):not(.tertiary).inverted { background-color: #b0620f; } input[type="file"].ui.file.input:focus + label.ui.grey.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.grey.button:not(.basic):not(.tertiary) { background-color: #838383; color: #FFFFFF; } input[type="file"].ui.file.input:focus + label.ui.grey.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.grey.button:not(.basic):not(.tertiary).inverted { background-color: #c2c4c5; } input[type="file"].ui.file.input:focus + label.ui.black.button:not(.basic):not(.tertiary), .ui.file.input input[type="file"]:focus + label.ui.black.button:not(.basic):not(.tertiary) { background-color: #27292a; color: #FFFFFF; } input[type="file"].ui.file.input:focus + label.ui.black.button:not(.basic):not(.tertiary).inverted, .ui.file.input input[type="file"]:focus + label.ui.black.button:not(.basic):not(.tertiary).inverted { background-color: #000000; } input[type="file"].ui.primary.file.input::-webkit-file-upload-button, .ui.primary.file.input input[type="file"]::-webkit-file-upload-button { background: #6435C9; color: #FFFFFF; } input[type="file"].ui.primary.file.input::-webkit-file-upload-button:hover, .ui.primary.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #5829bb; } input[type="file"].ui.primary.file.input::file-selector-button, .ui.primary.file.input input[type="file"]::file-selector-button { background: #6435C9; color: #FFFFFF; } input[type="file"].ui.primary.file.input::file-selector-button:hover, .ui.primary.file.input input[type="file"]::file-selector-button:hover { background: #5829bb; } input[type="file"].ui.secondary.file.input::-webkit-file-upload-button, .ui.secondary.file.input input[type="file"]::-webkit-file-upload-button { background: #1B1C1D; color: #FFFFFF; } input[type="file"].ui.secondary.file.input::-webkit-file-upload-button:hover, .ui.secondary.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #27292a; } input[type="file"].ui.secondary.file.input::file-selector-button, .ui.secondary.file.input input[type="file"]::file-selector-button { background: #1B1C1D; color: #FFFFFF; } input[type="file"].ui.secondary.file.input::file-selector-button:hover, .ui.secondary.file.input input[type="file"]::file-selector-button:hover { background: #27292a; } input[type="file"].ui.red.file.input::-webkit-file-upload-button, .ui.red.file.input input[type="file"]::-webkit-file-upload-button { background: #DB2828; color: #FFFFFF; } input[type="file"].ui.red.file.input::-webkit-file-upload-button:hover, .ui.red.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #d01919; } input[type="file"].ui.red.file.input::file-selector-button, .ui.red.file.input input[type="file"]::file-selector-button { background: #DB2828; color: #FFFFFF; } input[type="file"].ui.red.file.input::file-selector-button:hover, .ui.red.file.input input[type="file"]::file-selector-button:hover { background: #d01919; } input[type="file"].ui.orange.file.input::-webkit-file-upload-button, .ui.orange.file.input input[type="file"]::-webkit-file-upload-button { background: #F2711C; color: #FFFFFF; } input[type="file"].ui.orange.file.input::-webkit-file-upload-button:hover, .ui.orange.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #f26202; } input[type="file"].ui.orange.file.input::file-selector-button, .ui.orange.file.input input[type="file"]::file-selector-button { background: #F2711C; color: #FFFFFF; } input[type="file"].ui.orange.file.input::file-selector-button:hover, .ui.orange.file.input input[type="file"]::file-selector-button:hover { background: #f26202; } input[type="file"].ui.yellow.file.input::-webkit-file-upload-button, .ui.yellow.file.input input[type="file"]::-webkit-file-upload-button { background: #FBBD08; color: #FFFFFF; } input[type="file"].ui.yellow.file.input::-webkit-file-upload-button:hover, .ui.yellow.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #eaae00; } input[type="file"].ui.yellow.file.input::file-selector-button, .ui.yellow.file.input input[type="file"]::file-selector-button { background: #FBBD08; color: #FFFFFF; } input[type="file"].ui.yellow.file.input::file-selector-button:hover, .ui.yellow.file.input input[type="file"]::file-selector-button:hover { background: #eaae00; } input[type="file"].ui.olive.file.input::-webkit-file-upload-button, .ui.olive.file.input input[type="file"]::-webkit-file-upload-button { background: #B5CC18; color: #FFFFFF; } input[type="file"].ui.olive.file.input::-webkit-file-upload-button:hover, .ui.olive.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #a7bd0d; } input[type="file"].ui.olive.file.input::file-selector-button, .ui.olive.file.input input[type="file"]::file-selector-button { background: #B5CC18; color: #FFFFFF; } input[type="file"].ui.olive.file.input::file-selector-button:hover, .ui.olive.file.input input[type="file"]::file-selector-button:hover { background: #a7bd0d; } input[type="file"].ui.green.file.input::-webkit-file-upload-button, .ui.green.file.input input[type="file"]::-webkit-file-upload-button { background: #21BA45; color: #FFFFFF; } input[type="file"].ui.green.file.input::-webkit-file-upload-button:hover, .ui.green.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #16ab39; } input[type="file"].ui.green.file.input::file-selector-button, .ui.green.file.input input[type="file"]::file-selector-button { background: #21BA45; color: #FFFFFF; } input[type="file"].ui.green.file.input::file-selector-button:hover, .ui.green.file.input input[type="file"]::file-selector-button:hover { background: #16ab39; } input[type="file"].ui.teal.file.input::-webkit-file-upload-button, .ui.teal.file.input input[type="file"]::-webkit-file-upload-button { background: #00B5AD; color: #FFFFFF; } input[type="file"].ui.teal.file.input::-webkit-file-upload-button:hover, .ui.teal.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #009c95; } input[type="file"].ui.teal.file.input::file-selector-button, .ui.teal.file.input input[type="file"]::file-selector-button { background: #00B5AD; color: #FFFFFF; } input[type="file"].ui.teal.file.input::file-selector-button:hover, .ui.teal.file.input input[type="file"]::file-selector-button:hover { background: #009c95; } input[type="file"].ui.blue.file.input::-webkit-file-upload-button, .ui.blue.file.input input[type="file"]::-webkit-file-upload-button { background: #2185D0; color: #FFFFFF; } input[type="file"].ui.blue.file.input::-webkit-file-upload-button:hover, .ui.blue.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #1678c2; } input[type="file"].ui.blue.file.input::file-selector-button, .ui.blue.file.input input[type="file"]::file-selector-button { background: #2185D0; color: #FFFFFF; } input[type="file"].ui.blue.file.input::file-selector-button:hover, .ui.blue.file.input input[type="file"]::file-selector-button:hover { background: #1678c2; } input[type="file"].ui.violet.file.input::-webkit-file-upload-button, .ui.violet.file.input input[type="file"]::-webkit-file-upload-button { background: #6435C9; color: #FFFFFF; } input[type="file"].ui.violet.file.input::-webkit-file-upload-button:hover, .ui.violet.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #5829bb; } input[type="file"].ui.violet.file.input::file-selector-button, .ui.violet.file.input input[type="file"]::file-selector-button { background: #6435C9; color: #FFFFFF; } input[type="file"].ui.violet.file.input::file-selector-button:hover, .ui.violet.file.input input[type="file"]::file-selector-button:hover { background: #5829bb; } input[type="file"].ui.purple.file.input::-webkit-file-upload-button, .ui.purple.file.input input[type="file"]::-webkit-file-upload-button { background: #A333C8; color: #FFFFFF; } input[type="file"].ui.purple.file.input::-webkit-file-upload-button:hover, .ui.purple.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #9627ba; } input[type="file"].ui.purple.file.input::file-selector-button, .ui.purple.file.input input[type="file"]::file-selector-button { background: #A333C8; color: #FFFFFF; } input[type="file"].ui.purple.file.input::file-selector-button:hover, .ui.purple.file.input input[type="file"]::file-selector-button:hover { background: #9627ba; } input[type="file"].ui.pink.file.input::-webkit-file-upload-button, .ui.pink.file.input input[type="file"]::-webkit-file-upload-button { background: #E03997; color: #FFFFFF; } input[type="file"].ui.pink.file.input::-webkit-file-upload-button:hover, .ui.pink.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #e61a8d; } input[type="file"].ui.pink.file.input::file-selector-button, .ui.pink.file.input input[type="file"]::file-selector-button { background: #E03997; color: #FFFFFF; } input[type="file"].ui.pink.file.input::file-selector-button:hover, .ui.pink.file.input input[type="file"]::file-selector-button:hover { background: #e61a8d; } input[type="file"].ui.brown.file.input::-webkit-file-upload-button, .ui.brown.file.input input[type="file"]::-webkit-file-upload-button { background: #A5673F; color: #FFFFFF; } input[type="file"].ui.brown.file.input::-webkit-file-upload-button:hover, .ui.brown.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #975b33; } input[type="file"].ui.brown.file.input::file-selector-button, .ui.brown.file.input input[type="file"]::file-selector-button { background: #A5673F; color: #FFFFFF; } input[type="file"].ui.brown.file.input::file-selector-button:hover, .ui.brown.file.input input[type="file"]::file-selector-button:hover { background: #975b33; } input[type="file"].ui.grey.file.input::-webkit-file-upload-button, .ui.grey.file.input input[type="file"]::-webkit-file-upload-button { background: #767676; color: #FFFFFF; } input[type="file"].ui.grey.file.input::-webkit-file-upload-button:hover, .ui.grey.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #838383; } input[type="file"].ui.grey.file.input::file-selector-button, .ui.grey.file.input input[type="file"]::file-selector-button { background: #767676; color: #FFFFFF; } input[type="file"].ui.grey.file.input::file-selector-button:hover, .ui.grey.file.input input[type="file"]::file-selector-button:hover { background: #838383; } input[type="file"].ui.black.file.input::-webkit-file-upload-button, .ui.black.file.input input[type="file"]::-webkit-file-upload-button { background: #1B1C1D; color: #FFFFFF; } input[type="file"].ui.black.file.input::-webkit-file-upload-button:hover, .ui.black.file.input input[type="file"]::-webkit-file-upload-button:hover { background: #27292a; } input[type="file"].ui.black.file.input::file-selector-button, .ui.black.file.input input[type="file"]::file-selector-button { background: #1B1C1D; color: #FFFFFF; } input[type="file"].ui.black.file.input::file-selector-button:hover, .ui.black.file.input input[type="file"]::file-selector-button:hover { background: #27292a; } /*-------------------- Size ---------------------*/ .ui.input { font-size: 1em; } .ui.mini.input { font-size: 0.78571429em; } .ui.tiny.input { font-size: 0.85714286em; } .ui.small.input { font-size: 0.92857143em; } .ui.large.input { font-size: 1.14285714em; } .ui.big.input { font-size: 1.28571429em; } .ui.huge.input { font-size: 1.42857143em; } .ui.massive.input { font-size: 1.71428571em; } /******************************* Theme Overrides *******************************/ /******************************* Site Overrides *******************************/