Update card/button styling (based on settings/payload pages)

This commit is contained in:
hxnyk 2023-01-26 22:47:38 -08:00
parent 71f9e836f5
commit afd7a37b3d
9 changed files with 60 additions and 25 deletions

View file

@ -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);

View file

@ -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;

View file

@ -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,

View file

@ -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){

View file

@ -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;

View file

@ -317,7 +317,6 @@ export default {
}
.xss-card-container {
max-width: 1000px;
width: 100%;
}

View file

@ -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.

View file

@ -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%;
}

View file

@ -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>