Added colors hover

apps.py

@@ -5,4 +5,4 @@ class DesignTemplateConfig(AppConfig):
     default_auto_field = 'django.db.models.BigAutoField'
     name = 'design_template'
 
-colors = ['#479FF8', '#ffffff', '#198754', '#ffffff', '#dc3545', '#ffffff', '#0d6efd', '#ffffff', '#0d6efd']
+colors = ['#479FF8', '#ffffff', '#0a58ca', '#0d6efd', '#ffffff', '#0d6efd', '#0a58ca','#198754', '#198754', '#10683f', '#ffffff', '#dc3545', '#821e27', '#ffffff']

forms.py

@@ -11,17 +11,27 @@ class ColorsForm(forms.Form):
 
     btnTxt = forms.CharField(label='Цвет текста кнопок', initial=colors[1], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
 
-    btnSuccessBg = forms.CharField(label='Цвет кнопок успеха', initial=colors[2],  max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+    btnHover = forms.CharField(label='Цвет наведения у кнопок', initial=colors[2], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+
+    pillsBg = forms.CharField(label='Цвет плашек в меню', initial=colors[3], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+
+    pillsTxt = forms.CharField(label='Цвет текста плашек в меню', initial=colors[4], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+    
+    linksTxt = forms.CharField(label='Цвет текста ссылок', initial=colors[5], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
     
-    btnSuccessTxt = forms.CharField(label='Цвет текста кнопок успеха', initial=colors[3], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+    linksHover = forms.CharField(label='Цвет наведения у ссылок', initial=colors[6], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+
+    btnSuccessBg = forms.CharField(label='Цвет кнопок успеха', initial=colors[7],  max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+    
+    btnSuccessTxt = forms.CharField(label='Цвет текста кнопок успеха', initial=colors[8], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+
+    btnSuccessHover = forms.CharField(label='Цвет наведения у кнопок успеха', initial=colors[9], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
 
-    btnDangerBg = forms.CharField(label='Цвет текста кнопок предупреждения', initial=colors[4], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+    btnDangerBg = forms.CharField(label='Цвет текста кнопок предупреждения', initial=colors[10], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
     
-    btnDangerTxt = forms.CharField(label='Цвет текста кнопок предупреждения', initial=colors[5], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+    btnDangerTxt = forms.CharField(label='Цвет текста кнопок предупреждения', initial=colors[11], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
     
-    pillsBg = forms.CharField(label='Цвет плашек в меню', initial=colors[6], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
+    btnDangerHover = forms.CharField(label='Цвет наведения у кнопок предупреждения', initial=colors[12], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
 
-    pillsTxt = forms.CharField(label='Цвет текста плашек в меню', initial=colors[7], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
 
-    linksTxt = forms.CharField(label='Цвет текста ссылок', initial=colors[8], max_length=7, widget=forms.TextInput(attrs={'type': 'color'}))
 

static/design_template/colors.css

@@ -1,13 +1,17 @@
 :root{
   --btn-bg-color: #479FF8;
   --btn-txt-color: white;
+  --btn-hover-color: #0a58ca;
   --pills-bg-color: #0d6efd;
   --pills-txt-color: white;
   --links-txt-color: #0d6efd;
+  --links-hover-color: #0a58ca;
   --btn-success: #198754;
   --btn-success-txt: white;
+  --btn-success-hover:#10683f;
   --btn-danger: #dc3545;
   --btn-danger-txt: white;
+  --btn-danger-hover:#821e27;
 }
 
 .btn-primary, .btn-outline-primary{
@@ -16,6 +20,10 @@
   border-color: var(--btn-bg-color);
 }
 
+.btn-primary, .btn-outline-primary:hover{
+  color: var(--btn-hover-color);
+}
+
 .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
   background-color: var(--pills-bg-color);
   color: var(--pills-txt-color);
@@ -25,18 +33,36 @@ a{
  color: var(--links-txt-color); 
 }
 
+a:hover{
+  color:var(--links-hover-color)
+}
+
 .nav-link{
   color: var(--links-txt-color)
 }
 
+.nav-link:hover{
+  color:var(--links-hover-color)
+}
+
 .btn-success, .btn-outline-success{
   color: var(--btn-txt-color);
   background-color: var(--btn-success);
   border-color: var(--btn-success);
 }
 
+.btn-success, .btn-outline-success:hover{
+  background-color: var(--btn-success-hover);
+  border-color: var(--btn-success-hover);
+}
+
 .btn-danger, .btn-outline-danger{
   color: var(--btn-danger-txt);
   background-color: var(--btn-danger);
   border-color: var(--btn-danger);
+}
+
+.btn-danger, .btn-outline-danger:hover{
+  background-color: var(--btn-danger-hover);
+  border-color: var(--btn-danger-hover);
 }

templates/admin/change_colors.html

@@ -12,25 +12,34 @@
       <label for="{{form.btnTxt.id_for_label}}">{{form.btnTxt.label}}: </label>{{form.btnTxt}}
     </div>
     <div class="input-group mb-3">
-      <label for="{{form.btnSuccessBg.id_for_label}}">{{form.btnSuccessBg.label}}: </label>{{form.btnSuccessBg}}
+      <label for="{{form.btnHover.id_for_label}}">{{form.btnHover.label}}: </label>{{form.btnHover}}
     </div>
     <div class="input-group mb-3">
-      <label for="{{form.btnSuccessTxt.id_for_label}}">{{form.btnSuccessTxt.label}}: </label>{{form.btnSuccessTxt}}
+      <label for="{{form.pillsBg.id_for_label}}">{{form.pillsBg.label}}: </label>{{form.pillsBg}}
     </div>
     <div class="input-group mb-3">
-      <label for="{{form.btnDangerBg.id_for_label}}">{{form.btnDangerBg.label}}: </label>{{form.btnDangerBg}}
+      <label for="{{form.linksTxt.id_for_label}}">{{form.linksTxt.label}}: </label>{{form.linksTxt}}
     </div>
     <div class="input-group mb-3">
-      <label for="{{form.btnDangerTxt.id_for_label}}">{{form.btnDangerTxt.label}}: </label>{{form.btnDangerTxt}}
+      <label for="{{form.linksHover.id_for_label}}">{{form.linksHover.label}}: </label>{{form.linksHover}}
     </div>
     <div class="input-group mb-3">
-      <label for="{{form.pillsBg.id_for_label}}">{{form.pillsBg.label}}: </label>{{form.pillsBg}}
+      <label for="{{form.btnSuccessBg.id_for_label}}">{{form.btnSuccessBg.label}}: </label>{{form.btnSuccessBg}}
+    </div>
+    <div class="input-group mb-3">
+      <label for="{{form.btnSuccessTxt.id_for_label}}">{{form.btnSuccessTxt.label}}: </label>{{form.btnSuccessTxt}}
     </div>
     <div class="input-group mb-3">
-      <label for="{{form.pillsTxt.id_for_label}}">{{form.pillsTxt.label}}: </label>{{form.pillsTxt}}
+      <label for="{{form.btnSuccessHover.id_for_label}}">{{form.btnSuccessHover.label}}: </label>{{form.btnSuccessHover}}
     </div>
     <div class="input-group mb-3">
-      <label for="{{form.linksTxt.id_for_label}}">{{form.linksTxt.label}}: </label>{{form.linksTxt}}
+      <label for="{{form.btnDangerBg.id_for_label}}">{{form.btnDangerBg.label}}: </label>{{form.btnDangerBg}}
+    </div>
+    <div class="input-group mb-3">
+      <label for="{{form.btnDangerTxt.id_for_label}}">{{form.btnDangerTxt.label}}: </label>{{form.btnDangerTxt}}
+    </div>
+    <div class="input-group mb-3">
+      <label for="{{form.btnDangerHover.id_for_label}}">{{form.btnDangerHover.label}}: </label>{{form.btnDangerHover}}
     </div>
     <button type="submit" class="btn btn-primary">Отправить</button>
   </form>

views.py

@@ -25,25 +25,33 @@ def change_colors(request):
       form = ColorsForm(request.POST)
       if form.is_valid():
         btnBg = request.POST.get('btnBg')  
-        btnTxt = request.POST.get('btnTxt')  
+        btnTxt = request.POST.get('btnTxt') 
+        btnHover = request.POST.get('btnHover')
+        pillsBg = request.POST.get('pillsBg')  
+        pillsTxt = request.POST.get('pillsTxt')  
+        linksTxt = request.POST.get('linksTxt')
+        linksHover = request.POST.get('linksHover')
         btnSuccessBg = request.POST.get('btnSuccessBg')
         btnSuccessTxt = request.POST.get('btnSuccessTxt')
+        btnSuccessHover = request.POST.get('btnSuccessHover')
         btnDangerBg = request.POST.get('btnDangerBg')
         btnDangerTxt = request.POST.get('btnDangerTxt')
-        pillsBg = request.POST.get('pillsBg')  
-        pillsTxt = request.POST.get('pillsTxt')  
-        linksTxt = request.POST.get('linksTxt')
+        btnDangerHover = request.POST.get('btnDangerHover')
         css = f'''
 :root{{
   --btn-bg-color: {btnBg};
   --btn-txt-color: {btnTxt};
+  --btn-hover-color: {btnHover};
   --pills-bg-color: {pillsBg};
   --pills-txt-color: {pillsTxt};
-  --links-txt-color: {linksTxt};
+  --links-txt-color: {linksTxt  };
+  --links-hover-color: {linksHover};
   --btn-success: {btnSuccessBg};
   --btn-success-txt: {btnSuccessTxt};
+  --btn-success-hover: {btnSuccessHover};
   --btn-danger: {btnDangerBg};
   --btn-danger-txt: {btnDangerTxt};
+  --btn-danger-hover: {btnDangerHover};
 }}
 
 .btn-primary, .btn-outline-primary{{
@@ -52,6 +60,10 @@ def change_colors(request):
   border-color: var(--btn-bg-color);
 }}
 
+.btn-primary, .btn-outline-primary:hover{{
+  color: var(--btn-hover-color);
+}}
+
 .nav-pills .nav-link.active, .nav-pills .show>.nav-link{{
   background-color: var(--pills-bg-color);
   color: var(--pills-txt-color);
@@ -61,21 +73,39 @@ a{{
  color: var(--links-txt-color); 
 }}
 
+a:hover{{
+  color:var(--links-hover-color)
+}}
+
 .nav-link{{
   color: var(--links-txt-color)
 }}
 
+.nav-link:hover{{
+  color:var(--links-hover-color)
+}}
+
 .btn-success, .btn-outline-success{{
   color: var(--btn-txt-color);
   background-color: var(--btn-success);
   border-color: var(--btn-success);
 }}
 
+.btn-success, .btn-outline-success:hover{{
+  background-color: var(--btn-success-hover);
+  border-color: var(--btn-success-hover);
+}}
+
 .btn-danger, .btn-outline-danger{{
   color: var(--btn-danger-txt);
   background-color: var(--btn-danger);
   border-color: var(--btn-danger);
 }}
+
+.btn-danger, .btn-outline-danger:hover{{
+  background-color: var(--btn-danger-hover);
+  border-color: var(--btn-danger-hover);
+}}
 '''
         with open("design_template/static/design_template/colors.css", 'r+', encoding='utf-8') as file:
           file.write(css)