#85773 regru styles customization — blue color replace

src/nginxconfig/scss/_code.scss

@@ -54,6 +54,11 @@ pre {
             text-align: initial;
             vertical-align: initial;
           }
+
+          &.function,
+          &.keyword { 
+            color: $header;
+          }
         }
       }
     }

src/nginxconfig/scss/_header.scss

@@ -34,6 +34,7 @@ THE SOFTWARE.
   .container {
     h3 {
       @include font-medium;
+      font-size: medium;
     }
 
     form {

src/nginxconfig/scss/_panel.scss

@@ -63,6 +63,10 @@ THE SOFTWARE.
 
       .button {
         margin: 0 .25rem .5rem;
+
+        &.is-primary {
+          background-color: $header;
+        }
       }
     }
   }
@@ -87,6 +91,11 @@ THE SOFTWARE.
 
     .button {
       margin-left: .5rem;
+      
+      &.is-mini {
+        background-color: $header;
+        color: $callout;
+      }
 
       i + span,
       span + i {

src/nginxconfig/scss/_setup.scss

@@ -31,6 +31,7 @@ THE SOFTWARE.
       overflow-wrap: break-word;
 
       a {
+        color: $header;
         text-decoration: none;
       }
     }
@@ -47,4 +48,8 @@ THE SOFTWARE.
   .buttons {
     margin: 1rem 0;
   }
+
+  .dark-button {
+    background-color: $header;
+  }
 }

src/nginxconfig/scss/_tabs.scss

@@ -35,25 +35,24 @@ THE SOFTWARE.
       &:focus {
         a {
           &::after {
-            background: $dark-blue;
+            background: $header;
           }
         }
       }
 
-      // Light blue color if the user has gone past a tab
       &.is-before {
         a {
-          color: mix($dark-grey, $primary);
+          color: mix($header, $header);
 
           &::after {
-            background: rgba($primary, .5);
+            background: rgba($header, .5);
           }
 
           &:hover {
-            color: $dark-blue;
+            color: $header;
 
             &::after {
-              background: $dark-blue;
+              background: $header;
             }
           }
         }
@@ -62,7 +61,7 @@ THE SOFTWARE.
       // If a user has changed something in the tab, we'll make the text dark always
       &.is-changed {
         a {
-          color: $dark-blue;
+          color: $header;
         }
       }
 

src/nginxconfig/scss/style.scss

@@ -24,7 +24,7 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
 
-$header: #0071fe;
+$header: #066BC6;
 $highlight: #f2c94c;
 $callout: #f3f5f9;
 @import "~do-bulma/src/style";
@@ -32,14 +32,14 @@ $callout: #f3f5f9;
 .do-bulma {
   @import "../../../build/prism";
 
-  $pretty--color-dark: $primary;
-  $pretty--color-default: $primary;
+  $pretty--color-dark: $header;
+  $pretty--color-default: $header;
   @import "~pretty-checkbox/src/pretty-checkbox";
 
   $vs-border-color: $border;
   $vs-border-radius: $border-radius;
-  $vs-dropdown-box-shadow: 0 2px 4px rgba($dark-blue, .06);
-  $vs-state-active-bg: $primary;
+  $vs-dropdown-box-shadow: 0 2px 4px rgba($header, .06);
+  $vs-state-active-bg: $header;
   @import "~vue-select/src/scss/vue-select";
 
   @import "header";

src/nginxconfig/templates/app.vue

@@ -87,7 +87,7 @@ THE SOFTWARE.
                     <h2>{{ $t('templates.app.globalConfig') }}</h2>
                     <Global :data="global"></Global>
 
-                    <DropletCallout></DropletCallout>
+                    <!-- <DropletCallout></DropletCallout> -->
 
                     <h2>{{ $t('templates.app.setup') }}</h2>
                     <Setup :data="{ domains: domains.filter(d => d !== null), global, confFiles }"></Setup>

src/nginxconfig/templates/setup.vue

@@ -55,7 +55,7 @@ THE SOFTWARE.
 
         <div class="buttons is-centered">
             <a class="button is-success" @click="downloadTar">{{ $t('templates.setup.downloadConfig') }}</a>
-            <a ref="copyTar" class="button is-primary">{{ $t('templates.setup.copyBase64') }}</a>
+            <a ref="copyTar" class="button is-primary dark-button">{{ $t('templates.setup.copyBase64') }}</a>
         </div>
     </div>
 </template>