mirror of
https://github.com/trufflesecurity/xsshunter
synced 2024-11-24 13:23:04 +00:00
Update card/button styling (based on settings/payload pages)
This commit is contained in:
parent
71f9e836f5
commit
afd7a37b3d
9 changed files with 60 additions and 25 deletions
|
@ -103,8 +103,7 @@
|
|||
|
||||
// Apply the mixin to the buttons
|
||||
// .btn-default { @include btn-styles($default-color, $default-states-color); }
|
||||
.btn-primary { @include btn-styles($primary, $primary-states);
|
||||
|
||||
.btn-primary { @include btn-styles($default, $default-states);
|
||||
}
|
||||
.btn-success { @include btn-styles($success, $success-states);
|
||||
|
||||
|
|
|
@ -4,11 +4,12 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
background: #e7e0d8;
|
||||
background: transparent;
|
||||
color: black;
|
||||
|
||||
label{
|
||||
color: rgba($white, 0.6);
|
||||
color: rgba(black, 0.6);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
|
@ -18,6 +19,24 @@
|
|||
.card-body{
|
||||
padding: 15px;
|
||||
|
||||
.card {
|
||||
border: 1px solid #ae8c57;
|
||||
color: black;
|
||||
background: #f4efe9;
|
||||
|
||||
.card-title {
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
margin-top: 0.4rem;
|
||||
color: #5a5a5a !important;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.table-full-width{
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
|
|
@ -2,15 +2,23 @@
|
|||
@include form-control-placeholder(#6c757c, 1);
|
||||
|
||||
.form-control{
|
||||
border-color: lighten($black,5%);
|
||||
border-radius: $border-radius-lg;
|
||||
font-size: $font-size-sm;
|
||||
font-size: $font-size-base;
|
||||
@include transition-input-focus-color();
|
||||
|
||||
font-family: monospace;
|
||||
border-color: #dfd3b0;
|
||||
color: #5a5a5a;
|
||||
background-color: white;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&:focus{
|
||||
border-color: $primary;
|
||||
background-color: $input-bg;
|
||||
border-color: #ae8c57;
|
||||
background-color: rgba(white, 0.8);
|
||||
color: #5a5a5a;
|
||||
|
||||
@include box-shadow(none);
|
||||
|
||||
& + .input-group-append .input-group-text,
|
||||
|
|
|
@ -179,7 +179,10 @@ a[data-toggle="collapse"][aria-expanded="true"] .caret,
|
|||
}
|
||||
|
||||
code {
|
||||
color: $pink;
|
||||
color: #5bb381;
|
||||
font-weight: bold;
|
||||
background: #ffffffcc;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px){
|
||||
|
|
|
@ -99,23 +99,23 @@ $colors: map-merge((
|
|||
$default-color-opacity: rgba(182, 182, 182, .6) !default;
|
||||
$orange-color: #f96332 !default;
|
||||
|
||||
$default: #344675 !default;
|
||||
$default: #89553d !default;
|
||||
$primary: #2e5543 !default;
|
||||
$secondary: #f4f5f7 !default;
|
||||
$success: #00f2c3 !default;
|
||||
$success: #5bb381 !default;
|
||||
$info: #1d8cf8 !default;
|
||||
$warning: #ff8d72 !default;
|
||||
$danger: #fd5d93 !default;
|
||||
$danger: #c15750 !default;
|
||||
$black: #222a42 !default;
|
||||
$vue: #42b883 !default;
|
||||
|
||||
// gradient
|
||||
$default-states: #263148 !default;
|
||||
$default-states: #5b3524 !default;
|
||||
$primary-states: #111513 !default;
|
||||
$success-states: #0098f0 !default;
|
||||
$info-states: #3358f4 !default;
|
||||
$warning-states: #ff6491 !default;
|
||||
$danger-states: #ec250d !default;
|
||||
$danger-states: #662019 !default;
|
||||
$black-states: #1d253b !default;
|
||||
$vue-states: #389466 !default;
|
||||
|
||||
|
|
|
@ -317,7 +317,6 @@ export default {
|
|||
}
|
||||
|
||||
.xss-card-container {
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
@ -14,10 +14,12 @@
|
|||
<base-input v-bind:value="correlation_api_key" type="text" placeholder="..." ></base-input>
|
||||
</p>
|
||||
<base-button class="mr-1" type="primary" v-clipboard:copy="correlation_api_key" >
|
||||
<i class="far fa-copy"></i> Copy API Key
|
||||
<span style="display: inline-block; margin-right: 6px;"><i class="far fa-copy"></i></span>
|
||||
Copy API Key
|
||||
</base-button>
|
||||
<base-button type="danger" v-on:click="generate_new_correlation_api_key">
|
||||
<i class="fas fa-sync-alt"></i> Rotate API Key
|
||||
<span style="display: inline-block; margin-right: 6px;"><i class="fas fa-sync-alt"></i></span>
|
||||
Rotate API Key
|
||||
</base-button>
|
||||
</card>
|
||||
<card>
|
||||
|
@ -27,7 +29,8 @@
|
|||
<base-input v-model:value="user_path" type="text" placeholder="..."></base-input>
|
||||
</p>
|
||||
<base-button type="primary" v-on:click="update_path">
|
||||
<i class="fas fa-lock"></i> Update Path
|
||||
<span style="display: inline-block; margin-right: 6px;"><i class="fas fa-lock"></i></span>
|
||||
Update Path
|
||||
</base-button>
|
||||
</card>
|
||||
<card>
|
||||
|
@ -37,14 +40,16 @@
|
|||
<base-input v-model="chainload_uri" type="text" placeholder="https://example.com/remote.js"></base-input>
|
||||
</p>
|
||||
<base-button type="primary" v-on:click="update_chainload_uri">
|
||||
<i class="far fa-save"></i> Save JavaScript URL
|
||||
<span style="display: inline-block; margin-right: 6px;"><i class="far fa-save"></i></span>
|
||||
Save JavaScript URL
|
||||
</base-button>
|
||||
</card>
|
||||
<card>
|
||||
<h4 class="card-title">Miscellaneous Options</h4>
|
||||
<div v-if="send_alert_emails">
|
||||
<base-button type="primary" v-on:click="set_email_reporting">
|
||||
<i class="far fa-bell-slash"></i> Disable Email Reporting
|
||||
<span style="display: inline-block; margin-right: 6px;"><i class="far fa-bell-slash"></i></span>
|
||||
Disable Email Reporting
|
||||
</base-button>
|
||||
<h6 class="mt-2 text-muted">
|
||||
Disable the sending of XSS payload fire reports to the specified email address.
|
||||
|
@ -52,7 +57,8 @@
|
|||
</div>
|
||||
<div v-if="!send_alert_emails">
|
||||
<base-button type="primary" v-on:click="set_email_reporting">
|
||||
<i class="far fa-bell"></i> Enable Email Reporting
|
||||
<span style="display: inline-block; margin-right: 6px;"><i class="far fa-bell"></i></span>
|
||||
Enable Email Reporting
|
||||
</base-button>
|
||||
<h6 class="mt-2 text-muted">
|
||||
Enable the sending of XSS payload fire reports to the specified email address.
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<card class="xss-card-container">
|
||||
<div class="row pl-4 pr-4 p-2" style="display: block;">
|
||||
<div>
|
||||
<h1><i class="fas fa-fire"></i> XSS Payload Fire Reports ({{format_with_commas(report_count)}} Total)</h1>
|
||||
<h1><i class="fas fa-fire"></i> XSS Payload Fire Reports ({{format_with_commas(report_count)}} total)</h1>
|
||||
<hr />
|
||||
<div v-for="report in payload_fire_reports">
|
||||
<card class="mb-0">
|
||||
|
@ -480,7 +480,6 @@ export default {
|
|||
}
|
||||
|
||||
.xss-card-container {
|
||||
max-width: 1000px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
@ -13,7 +13,9 @@
|
|||
<p class="card-text">
|
||||
<base-input type="text" v-bind:value="payload.func()" placeholder="..."></base-input>
|
||||
</p>
|
||||
<base-button type="primary" v-clipboard:copy="payload.func()"><i class="far fa-copy"></i> Copy Payload</base-button>
|
||||
<base-button type="primary" v-clipboard:copy="payload.func()">
|
||||
<span style="display: inline-block; margin-right: 6px;"><i class="far fa-copy"></i></span>
|
||||
Copy Payload</base-button>
|
||||
</card>
|
||||
</div>
|
||||
</card>
|
||||
|
|
Loading…
Reference in a new issue