diff options
Diffstat (limited to 'css/style.scss')
| -rw-r--r-- | css/style.scss | 348 |
1 files changed, 348 insertions, 0 deletions
diff --git a/css/style.scss b/css/style.scss new file mode 100644 index 0000000..404eef4 --- /dev/null +++ b/css/style.scss @@ -0,0 +1,348 @@ +/** + * @copyright Copyright (c) 2017 Matthias Held <matthias.held@uni-konstanz.de> + * + * @author Matthias Held <matthias.held@uni-konstanz.de> + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see <https://www.gnu.org/licenses/>. + */ + +#ransomware_detection { + ul > li > span.icon { + display: inline-block; + } +} + +.row { + margin-left: -15px; + margin-right: -15px; + position: relative; + &:before, &:after { + content: " "; + display: table + } + &:after { + clear: both + } +} + +.sequence-color { + float: left; + height: 100%; + position: absolute; + top: 0; + bottom: 0; + width: 20px; +} + +.color-box { + height: 100%; + width: 20px; +} + +.sequence-table { + float: right; + width: 100%; + padding-left: 25px; +} + +.ransomware-files { + position: relative; + width: 100%; + color: #2A2A2A; +} + +.file-list { + tr { + &:hover { + td.selection > .selectCheckBox + label:before { + opacity: 1; + } + } + &:focus { + td.selection > .selectCheckBox + label:before { + opacity: 1; + } + } + &.selected { + td.selection > .selectCheckBox + label:before { + opacity: 1; + } + } + td { + &.selection > .selectCheckBox + label:before { + opacity: 0; + position: absolute; + bottom: 4px; + right: 0; + z-index: 10; + } + &.selection { + position: relative; + width: 51px; + vertical-align: top; + padding-left: 0; + padding-right:0; + -webkit-transition:background-image 500ms; -moz-transition:background-image 500ms; -o-transition:background-image 500ms; transition:background-image 500ms; + } + &.selection > .selectCheckBox + label { + background-position: 30px 30px; + height: 50px; + position: absolute; + width: 50px; + z-index: 5; + } + &.selection > .selectCheckBox:checked + label:before { + opacity: 1; + } + &.selection > .selectCheckBox { + position: absolute; + z-index: 10; + } + &.file-name { + width: 50%; + } + } + } +} + +.select-all + label { + top: 0; + background-position: 30px 30px; + height: 50px; + position: absolute; + width: 50px; + z-index: 5; + &:before { + position: absolute; + top: 18px; + left: 18px; + z-index: 10; + } +} + +.has-favorites { + .select-all { + left: 68px; + } +} + +.icon { + display: inline-block; + vertical-align: middle; + background-size: 16px 16px; +} + +span { + &.extension { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + opacity: 1; + -webkit-transition: opacity 300ms; + -moz-transition: opacity 300ms; + -o-transition: opacity 300ms; + transition: opacity 300ms; + vertical-align: top; + color: #2A2A2A; + font-weight: bold; + } +} + +table { + td { + padding: 0 15px; + font-style: normal; + background-position: 8px center; + background-repeat: no-repeat; + &.selection { + .nametext { + position: absolute; + left: 55px; + padding: 0; + overflow: hidden; + text-overflow: ellipsis; + width: 70%; + max-width: 800px; + height: 100%; + } + .thumbnail { + display: inline-block; + width: 32px; + height: 32px; + margin-left: 8px; + margin-top: 9px; + cursor: pointer; + float: left; + position: absolute; + z-index: 4; + } + } + p { + text-align: center; + } + } + th { + .column-title { + display: block; + padding: 15px; + height: 50px; + box-sizing: border-box; + -moz-box-sizing: border-box; + vertical-align: middle; + a { + &.recover-selected { + font-weight: bold; + color: #000; + opacity: 0.3; + &:hover { + opacity: 0.7; + } + } + } + } + .bold { + font-weight: bold; + color: #000; + } + p { + text-align: center; + } + a { + color: #999; + } + color: #999; + } + th, td { + border-bottom: 1px solid #eee; + text-align: left; + font-weight: normal; + } + tbody { + tr { + transition: background-color 0.3s ease; + background-color: #fff; + height: 51px; + &.green { + background-color: #87D37C; + } + &.color-blind-green { + background-color: rgba(11, 85, 159, .25); + } + &.yellow { + background-color: #F5D76E; + } + &.color-blind-yellow { + background-color: rgba(11, 85, 159, .5); + } + &.orange { + background-color: #EB9532; + } + &.color-blind-orange { + background-color: rgba(11, 85, 159, .75); + } + &.red { + background-color: #FF6347; + } + &.color-blind-red { + background-color: rgba(11, 85, 159, 1); + } + &.selected { + background-color: rgba(153, 153, 153, .1) !important; + } + } + } +} + +.color-box { + &.green { + background-color: #87D37C; + } + &.color-blind-green { + background-color: rgba(11, 85, 159, .25); + } + &.yellow { + background-color: #F5D76E; + } + &.color-blind-yellow { + background-color: rgba(11, 85, 159, .5); + } + &.orange { + background-color: #EB9532; + } + &.color-blind-orange { + background-color: rgba(11, 85, 159, .75); + } + &.red { + background-color: #FF6347; + } + &.color-blind-red { + background-color: rgba(11, 85, 159, 1); + } +} + +.legend { + .color-box { + width: 20px; + height: 20px; + float: left; + margin: 0px 5px 0px 5px; + } + .icon-box { + width: 10px; + height: 20px; + float: left; + margin: 0px 0px 0px 5px; + } + li { + float: left; + } + clear: both; + padding-top: 5px; +} + +.section { + margin-bottom: 0px; + .sequence-action { + padding: 4px 0px 4px 0px; + font-weight: bold; + color: #000; + opacity: 0.3; + &:hover { + opacity: 0.7; + } + } +} + +.action { + padding: 4px 0px 4px 0px; + font-weight: bold; + color: #000; + opacity: 0.3; + &:hover { + opacity: 0.7; + } +} + +.suspicion-level-1 { + background-color: #F5D76E; +} + +.suspicion-level-2 { + background-color: #EB9532; +} + +.suspicion-level-3 { + background-color: #FF6347; +} |