diff --git a/brutaldon/static/css/minimal-large.css b/brutaldon/static/css/minimal-large.css index d76028a..18a5f1f 100644 --- a/brutaldon/static/css/minimal-large.css +++ b/brutaldon/static/css/minimal-large.css @@ -1,4 +1,4 @@ -body, input, textarea { +body, input, textarea, select { font-family: sans-serif; background-color: #FAFAFA; color: #000; @@ -6,6 +6,13 @@ body, input, textarea { font-size: larger; } +input[text], textarea +{ + margin: 0 auto; + position: relative; + width: 100%; + max-width: 120em; +} a { color: blue; @@ -209,481 +216,15 @@ img.emoji vertical-align: text-bottom; } -.input, -.textarea { - background-color: white; - border-color: #dbdbdb; - color: #363636; - box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); - max-width: 100%; - width: 100%; +.is-hidden +{ + display: none; } -.input::-moz-placeholder, -.textarea::-moz-placeholder { - color: rgba(54, 54, 54, 0.3); -} - -.input::-webkit-input-placeholder, -.textarea::-webkit-input-placeholder { - color: rgba(54, 54, 54, 0.3); -} - -.input:-moz-placeholder, -.textarea:-moz-placeholder { - color: rgba(54, 54, 54, 0.3); -} - -.input:-ms-input-placeholder, -.textarea:-ms-input-placeholder { - color: rgba(54, 54, 54, 0.3); -} - -.input:hover, .input.is-hovered, -.textarea:hover, -.textarea.is-hovered { - border-color: #b5b5b5; -} - -.input:focus, .input.is-focused, .input:active, .input.is-active, -.textarea:focus, -.textarea.is-focused, -.textarea:active, -.textarea.is-active { - border-color: #3273dc; - box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); -} - -.input[disabled], -.textarea[disabled] { - background-color: whitesmoke; - border-color: whitesmoke; - box-shadow: none; - color: #7a7a7a; -} - -.input[disabled]::-moz-placeholder, -.textarea[disabled]::-moz-placeholder { - color: rgba(122, 122, 122, 0.3); -} - -.input[disabled]::-webkit-input-placeholder, -.textarea[disabled]::-webkit-input-placeholder { - color: rgba(122, 122, 122, 0.3); -} - -.input[disabled]:-moz-placeholder, -.textarea[disabled]:-moz-placeholder { - color: rgba(122, 122, 122, 0.3); -} - -.input[disabled]:-ms-input-placeholder, -.textarea[disabled]:-ms-input-placeholder { - color: rgba(122, 122, 122, 0.3); -} - -.input[readonly], -.textarea[readonly] { - box-shadow: none; -} -.textarea { - display: block; - max-width: 100%; - min-width: 100%; - padding: 0.625em; - resize: vertical; -} - -.textarea:not([rows]) { - max-height: 600px; - min-height: 120px; -} - -.textarea[rows] { - height: initial; -} - -.textarea.has-fixed-size { - resize: none; -} - -.checkbox, -.radio { - cursor: pointer; - display: inline-block; - line-height: 1.25; - position: relative; -} - -.checkbox input, -.radio input { - cursor: pointer; -} - -.checkbox:hover, -.radio:hover { - color: #363636; -} - -.checkbox[disabled], -.radio[disabled] { - color: #7a7a7a; - cursor: not-allowed; -} - -.radio + .radio { - margin-left: 0.5em; -} - -.select { - display: inline-block; - max-width: 100%; - position: relative; - vertical-align: top; -} - -.select:not(.is-multiple) { - height: 2.25em; -} - - -.select select { - background-color: white; - border-color: #dbdbdb; - color: #363636; - cursor: pointer; - display: block; - font-size: 1em; - max-width: 100%; - outline: none; -} - -.select select::-moz-placeholder { - color: rgba(54, 54, 54, 0.3); -} - -.select select::-webkit-input-placeholder { - color: rgba(54, 54, 54, 0.3); -} - -.select select:-moz-placeholder { - color: rgba(54, 54, 54, 0.3); -} - -.select select:-ms-input-placeholder { - color: rgba(54, 54, 54, 0.3); -} - -.select select:hover, .select select.is-hovered { - border-color: #b5b5b5; -} - -.select select:focus, .select select.is-focused, .select select:active, .select select.is-active { - border-color: #3273dc; - box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); -} - -.select select[disabled] { - background-color: whitesmoke; - border-color: whitesmoke; - box-shadow: none; - color: #7a7a7a; -} - -.select select[disabled]::-moz-placeholder { - color: rgba(122, 122, 122, 0.3); -} - -.select select[disabled]::-webkit-input-placeholder { - color: rgba(122, 122, 122, 0.3); -} - -.select select[disabled]:-moz-placeholder { - color: rgba(122, 122, 122, 0.3); -} - -.select select[disabled]:-ms-input-placeholder { - color: rgba(122, 122, 122, 0.3); -} - -.select select::-ms-expand { - display: none; -} - -.select select[disabled]:hover { - border-color: whitesmoke; -} - -.select select:not([multiple]) { - padding-right: 2.5em; -} - -.select select[multiple] { - height: initial; - padding: 0; -} - -.select select[multiple] option { - padding: 0.5em 1em; -} - -.select:not(.is-multiple):not(.is-loading):hover::after { - border-color: #363636; -} - -.file { - align-items: stretch; - display: flex; - justify-content: flex-start; - position: relative; -} -.file-label { - align-items: stretch; - display: flex; - cursor: pointer; - justify-content: flex-start; - overflow: hidden; - position: relative; -} - -.file-label:hover .file-cta { - background-color: #eeeeee; - color: #363636; -} - -.file-label:hover .file-name { - border-color: #d5d5d5; -} - -.file-label:active .file-cta { - background-color: #e8e8e8; - color: #363636; -} - -.file-label:active .file-name { - border-color: #cfcfcf; -} - -.file-input { - height: 0.01em; - left: 0; - outline: none; - position: absolute; - top: 0; - width: 0.01em; -} - -.file-cta, -.file-name { - border-color: #dbdbdb; - border-radius: 4px; - font-size: 1em; - padding-left: 1em; - padding-right: 1em; - white-space: nowrap; -} - -.file-cta { - background-color: whitesmoke; - color: #4a4a4a; -} - -.file-name { - border-color: #dbdbdb; - border-style: solid; - border-width: 1px 1px 1px 0; - display: block; - max-width: 16em; - overflow: hidden; - text-align: left; - text-overflow: ellipsis; -} - -.file-icon { - align-items: center; - display: flex; - height: 1em; - justify-content: center; - margin-right: 0.5em; - width: 1em; -} - -.file-icon .fa { - font-size: 14px; -} - -.label { - color: #363636; - display: block; - font-size: 1rem; - font-weight: 700; -} - -.label:not(:last-child) { - margin-bottom: 0.5em; -} -.field.has-addons { - display: flex; - justify-content: flex-start; -} - -.field.has-addons .control:not(:last-child) { - margin-right: -1px; -} - -.field.has-addons .control:not(:first-child):not(:last-child) .button, -.field.has-addons .control:not(:first-child):not(:last-child) .input, -.field.has-addons .control:not(:first-child):not(:last-child) .select select { - border-radius: 0; -} - -.field.has-addons .control:first-child .button, -.field.has-addons .control:first-child .input, -.field.has-addons .control:first-child .select select { - border-bottom-right-radius: 0; - border-top-right-radius: 0; -} - -.field.has-addons .control:last-child .button, -.field.has-addons .control:last-child .input, -.field.has-addons .control:last-child .select select { - border-bottom-left-radius: 0; - border-top-left-radius: 0; -} - -.field.has-addons .control .button:hover, .field.has-addons .control .button.is-hovered, -.field.has-addons .control .input:hover, -.field.has-addons .control .input.is-hovered, -.field.has-addons .control .select select:hover, -.field.has-addons .control .select select.is-hovered { - z-index: 2; -} - -.field.has-addons .control .button:focus, .field.has-addons .control .button.is-focused, .field.has-addons .control .button:active, .field.has-addons .control .button.is-active, -.field.has-addons .control .input:focus, -.field.has-addons .control .input.is-focused, -.field.has-addons .control .input:active, -.field.has-addons .control .input.is-active, -.field.has-addons .control .select select:focus, -.field.has-addons .control .select select.is-focused, -.field.has-addons .control .select select:active, -.field.has-addons .control .select select.is-active { - z-index: 3; -} - -.field.has-addons .control .button:focus:hover, .field.has-addons .control .button.is-focused:hover, .field.has-addons .control .button:active:hover, .field.has-addons .control .button.is-active:hover, -.field.has-addons .control .input:focus:hover, -.field.has-addons .control .input.is-focused:hover, -.field.has-addons .control .input:active:hover, -.field.has-addons .control .input.is-active:hover, -.field.has-addons .control .select select:focus:hover, -.field.has-addons .control .select select.is-focused:hover, -.field.has-addons .control .select select:active:hover, -.field.has-addons .control .select select.is-active:hover { - z-index: 4; -} - -.field.has-addons .control.is-expanded { - flex-grow: 1; -} - -.field.has-addons.has-addons-centered { - justify-content: center; -} - -.field.has-addons.has-addons-right { - justify-content: flex-end; -} - -.field.has-addons.has-addons-fullwidth .control { - flex-grow: 1; - flex-shrink: 0; -} -.control { - font-size: 1rem; - position: relative; - text-align: left; -} - -.control.has-icon .icon { - color: #dbdbdb; - height: 2.25em; - pointer-events: none; - position: absolute; - top: 0; - width: 2.25em; - z-index: 4; -} - -.control.has-icon .input:focus + .icon { - color: #7a7a7a; -} - - -.control.has-icon:not(.has-icon-right) .icon { - left: 0; -} - -.control.has-icon:not(.has-icon-right) .input { - padding-left: 2.25em; -} - -.control.has-icon.has-icon-right .icon { - right: 0; -} - -.control.has-icon.has-icon-right .input { - padding-right: 2.25em; -} - -.control.has-icons-left .input:focus ~ .icon, -.control.has-icons-left .select:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon, -.control.has-icons-right .select:focus ~ .icon { - color: #7a7a7a; -} - -.control.has-icons-left .input.is-small ~ .icon, -.control.has-icons-left .select.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon, -.control.has-icons-right .select.is-small ~ .icon { - font-size: 0.75rem; -} - -.control.has-icons-left .input.is-medium ~ .icon, -.control.has-icons-left .select.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon, -.control.has-icons-right .select.is-medium ~ .icon { - font-size: 1.25rem; -} - -.control.has-icons-left .input.is-large ~ .icon, -.control.has-icons-left .select.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon, -.control.has-icons-right .select.is-large ~ .icon { - font-size: 1.5rem; -} - -.control.has-icons-left .icon, .control.has-icons-right .icon { - color: #dbdbdb; - height: 2.25em; - pointer-events: none; - position: absolute; - top: 0; - width: 2.25em; - z-index: 4; -} - -.control.has-icons-left .input, -.control.has-icons-left .select select { - padding-left: 2.25em; -} - -.control.has-icons-left .icon.is-left { - left: 0; -} - -.control.has-icons-right .input, -.control.has-icons-right .select select { - padding-right: 2.25em; -} - -.control.has-icons-right .icon.is-right { - right: 0; +.box +{ + border-radius: 5px; + border: 1px solid #000; + padding: 1.5em; + margin-bottom: 1.5em; }