diff --git a/static/coreprotect/css/main.css b/static/coreprotect/css/main.css new file mode 100644 index 0000000..e8b1b69 --- /dev/null +++ b/static/coreprotect/css/main.css @@ -0,0 +1,405 @@ +/* + * Defaults, will be overridden by javascript + */ +/* + * Global variables + */ +/* + * Default elements + */ +body, +html { + width: 100%; + height: 100%; + padding: 0; + margin: 0; +} +body { + background: #E7E7E2; + color: #444444; + font-family: Ubuntu, Arial, Helvetica, Sans-serif; + font-size: 14px; +} +a { + text-decoration: none; + color: #556677; +} +a:hover { + color: #444444; +} +/* + * Inputs + */ +input[type=text], +input[type=password] { + padding: 5px; + margin: 0; + border: 0; + background: #dbdbd6; + color: #444444; + font-family: Ubuntu, Arial, Helvetica, Sans-serif; + border-bottom: 1px solid #aaaaaa; +} +input[type=text]:hover, +input[type=password]:hover, +input[type=text]:focus, +input[type=password]:focus { + background: #eeeeee; +} +button, +input[type=submit] { + margin: 0 2px; + padding: 10px 0; + width: 90px; + border: 1px solid #aaaaaa; + background: #dbdbd6; + color: #556677; +} +button:hover, +input[type=submit]:hover { + cursor: pointer; + color: #444444; + background: #eeeeee; +} +button:active, +input[type=submit]:active { + background: #ff6139; +} +select { + background: #dbdbd6; + border: none; + padding: 0; + margin: 0; + color: #444444; +} +#limit-container { + text-align: center; +} +#limit-container #limit { + text-align: left; +} +/* + * Custom inputs + */ +label.custom-check { + color: #556677; + background: #dbdbd6; + cursor: pointer; + border-bottom: 1px solid #aaaaaa; + height: 32px; + width: 100%; + display: block; +} +label.custom-check:hover { + color: #444444; + background: #eeeeee; +} +label.custom-check:active { + background: #ff6139; +} +label.custom-check input[type=checkbox] { + display: none; +} +label.custom-check input[type=checkbox]:checked + div span { + background: #444444; +} +label.custom-check input[type=checkbox]:checked + div { + height: 32px; + background: #ff6139; + color: #444444; +} +label.custom-check div span { + display: inline-block; + margin: 8px; + width: 16px; + height: 16px; + background: #c2c2bd; + vertical-align: middle; +} +.text-full { + width: 179px; +} +.text-third { + width: 53px; +} +/* + * Header + */ +header { + width: 1200px; + background: #c2c2bd; + border-bottom: 1px solid #aaaaaa; + margin-bottom: 10px; + text-align: center; + position: relative; +} +header h1 { + padding: 10px; + margin: 0 auto; +} +header select { + position: absolute; + right: 20px; + top: 20px; +} +/* + * Main panels + */ +#main { + background: #c2c2bd; + margin: 0 auto; + width: 1200px; + min-height: 100%; + max-height: auto; +} +#left-pane { + float: left; + width: 400px; +} +#right-pane { + float: left; + width: 800px; +} +/* + * Left pane + */ +#options-top { + background: #c2c2bd; + width: 400px; +} +.option-column { + width: 200px; + float: left; +} +.option-column menu { + margin: 5px; + padding: 0; +} +.option-column menu h3 { + text-align: center; + font-weight: bold; + font-size: 1.2em; + padding: 5px 0; + margin: 0; +} +#options-bottom { + width: 400px; + margin-top: 10px; +} +#more-options-container { + width: 400px; + float: left; +} +/* + * Right pane + */ +#results-container { + padding: 5px; + margin-left: 10px; + margin-bottom: 70px; +} +#results-table { + width: 100%; + font-size: 0.9em; +} +/* + * Footer + */ +#footer { + left: 0; + width: 1200px; + bottom: 0; + height: 60px; + position: fixed; + width: 100%; +} +#footer-container { + border-top: 1px solid #aaaaaa; + margin: 0 auto; + background: #c2c2bd; + width: 1200px; + height: 100px; +} +#footer-info { + text-align: center; + line-height: 60px; + width: 100%; +} +/* + * JQueryUI overrides + */ +.ui-button, +.ui-state-default, +.ui-state-hover { + background: #dbdbd6; + color: #556677; + text-align: center !important; +} +.ui-button:hover, +.ui-state-default:hover, +.ui-state-hover:hover { + color: #444444; + background: #eeeeee; +} +.ui-button:active, +.ui-state-default:active, +.ui-state-hover:active { + background: #ff6139; +} +.ui-state-active, +.ui-selected, +.ui-selecting { + color: #444444; + background: #ff6139 !important; +} +.ui-slider-handle { + background: #ff6139; +} +/* + * Datepicker Overrides + */ +.ui-datepicker { + background: #dbdbd6; + width: 240px !important; +} +.ui-slider { + background: #c2c2bd; +} +.ui-slider-handle { + background: #556677; +} +.ui-datepicker-calendar td a { + text-align: center; +} +.ui-datepicker-calendar td a:hover { + color: #444444 !important; + background: #eeeeee !important; +} +/* + * DataTables overrides + */ +.DataTables_sort_wrapper span { + display: none; +} +#results-table { + margin-top: 10px; + border-collapse: collapse; + cursor: pointer; +} +#results-table table { + border-spacing: 0; + border-collapse: collapse; +} +#results-table th { + border-bottom: 1px solid #aaaaaa; + padding: 5px 0; +} +#results-table th[aria-sort="ascending"], +#results-table th[aria-sort="descending"] { + color: #444444; + background: #ff6139 !important; +} +#results-table th:hover { + color: #444444; + background: #eeeeee; +} +#results-table th:active { + background: #ff6139; +} +#results-table td { + margin: 0; + padding: 3px 5px; +} +#results-table tbody tr:hover { + background: #eeeeee; +} +#results-table .odd { + background: #dbdbd6; +} +#results-table .data { + max-width: 200px; +} +#results-table_length { + display: inline-block; + float: left; +} +#results-table_paginate { + display: inline-block; + text-align: center; + margin: 0 auto; +} +#results-table_paginate a { + padding: 5px; + margin: 2px; +} +#results-table_paginate > .ui-state-disabled { + opacity: 0.2; +} +#results-table_paginate span a.ui-state-disabled { + background: #ff6139; + color: #444444; +} +#results-table_filter { + display: inline-block; + float: right; +} +#results-table_filter label input { + margin-top: -3px; +} +.top { + text-align: center; +} +/* + * Angular + */ +.ng-invalid { + background: #ff6358 !important; +} +.disabled { + cursor: default; + background: #c2c2bd !important; +} +/* + * Miscellaneous + */ +.clearfix { + clear: both; +} +.hidden { + display: none; +} +.error { + background: #ff6358 !important; +} +.message { + text-align: center; + padding: 5px; + margin: 2px 0; +} +/* + * Tooltip + */ +.tooltip { + padding: 15px; + color: #444444; + border: 1px solid #aaaaaa; + background: #dbdbd6; + position: fixed; + line-height: 1.5em; +} +/* + * Login + */ +.login { + border: 1px solid #aaaaaa; + width: 300px; + margin: 50px auto; + padding: 10px; + text-align: center; +} +.login h3 { + margin: 0; +} +.login div { + margin-top: 10px; +} diff --git a/templates/coreprotect/coreprotect.html b/templates/coreprotect/coreprotect.html index fe7dc07..f0b90af 100644 --- a/templates/coreprotect/coreprotect.html +++ b/templates/coreprotect/coreprotect.html @@ -7,7 +7,7 @@