style: Refactoring CSS vars, difference between primary and success c…

…olors
roadiz · Oct 13, 2023 · be5a594 · be5a594
1 parent 1911a2d
commit be5a594
Show file tree

Hide file tree

Showing 128 changed files with 436 additions and 605 deletions.
diff --git a/lib/RoadizCoreBundle/templates/customForm/customForm.html.twig b/lib/RoadizCoreBundle/templates/customForm/customForm.html.twig
@@ -16,7 +16,7 @@
             {{ form_widget(form) }}
             <fieldset data-uk-margin>
                 {% apply spaceless %}
-                <button data-action-save="#add-custom-form-form" class="uk-button uk-button-primary rz-action-save" type="submit">
+                <button data-action-save="#add-custom-form-form" class="uk-button uk-button-success rz-action-save" type="submit">
                     <span class="icon-container"><i class="uk-icon-send"></i></span>
                     <span class="label"><span class="label-text">{% trans %}form.submit{% endtrans %}</span></span>
                 </button>

diff --git a/lib/RoadizFontBundle/templates/admin/add.html.twig b/lib/RoadizFontBundle/templates/admin/add.html.twig
@@ -22,7 +22,7 @@
         <fieldset data-uk-margin>
             {% apply spaceless %}
                 <button data-action-save="#edit-font-form"
-                        class="uk-button uk-button-primary rz-action-save" type="submit">
+                        class="uk-button uk-button-success rz-action-save" type="submit">
                     <span class="icon-container"><i class="uk-icon-rz-save"></i></span>
                     <span class="label"><span class="label-text">{% block content_form_submit_label %}
                                 {%- trans -%}save{%- endtrans -%}

diff --git a/lib/RoadizFontBundle/templates/admin/list.html.twig b/lib/RoadizFontBundle/templates/admin/list.html.twig
@@ -68,7 +68,7 @@
                                    data-uk-tooltip="{animation:true}">
                                     <i class="uk-icon-rz-download"></i>
                                 </a>
-                                <a class="uk-button uk-button-content uk-button-small uk-button-table-delete"
+                                <a class="uk-button uk-button-content uk-button-small uk-button-danger"
                                    href="{{ path('fontsDeletePage', { id: item.id }) }}"
                                    title="{% trans %}delete{% endtrans %}"
                                    data-uk-tooltip="{animation:true}">

diff --git a/lib/RoadizRozierBundle/templates/documents/limitations.html.twig b/lib/RoadizRozierBundle/templates/documents/limitations.html.twig
@@ -16,7 +16,7 @@
             {{ form_widget(form) }}
             <fieldset data-uk-margin>
                 {% apply spaceless %}
-                <button data-action-save="#edit-document-form" class="uk-button uk-button-primary rz-action-save" type="submit">
+                <button data-action-save="#edit-document-form" class="uk-button uk-button-success rz-action-save" type="submit">
                     <span class="icon-container"><i class="uk-icon-rz-save-mini"></i></span>
                     <span class="label"><span class="label-text">{% trans %}save{% endtrans %}</span></span>
                 </button>

diff --git a/lib/RoadizRozierBundle/templates/documents/list-table.html.twig b/lib/RoadizRozierBundle/templates/documents/list-table.html.twig
@@ -53,7 +53,7 @@
             {% apply spaceless %}
                 <a class="uk-button uk-button-content uk-button-small document-link"
                    href="{{ path('documentsEditPage', { documentId: document.id }) }}"><i class="uk-icon-rz-pencil"></i></a>
-                <a class="uk-button uk-button-content uk-button-small uk-button-table-delete"
+                <a class="uk-button uk-button-content uk-button-small uk-button-danger"
                    href="{{ path('documentsDeletePage', { documentId: document.id }) }}"><i class="uk-icon-trash-o"></i></a>
             {% endapply %}
         </td>

diff --git a/lib/RoadizRozierBundle/templates/nodes/editAliases.html.twig b/lib/RoadizRozierBundle/templates/nodes/editAliases.html.twig
@@ -28,7 +28,7 @@
                 {{ form_widget(seoForm) }}
                 <fieldset data-uk-margin>
                     {% apply spaceless %}
-                        <button data-action-save="#edit-seo-form" class="uk-button uk-button-primary rz-action-save" type="submit">
+                        <button data-action-save="#edit-seo-form" class="uk-button uk-button-success rz-action-save" type="submit">
                             <span class="icon-container"><i class="uk-icon-rz-save-mini"></i></span>
                             <span class="label"><span class="label-text">{% trans %}save{% endtrans %}</span></span>
                         </button>

diff --git a/lib/RoadizRozierBundle/templates/nodes/realms.html.twig b/lib/RoadizRozierBundle/templates/nodes/realms.html.twig
@@ -64,7 +64,7 @@
                                         <i class="uk-icon-user-secret"></i>
                                     </a>
                                 {% endif %}
-                                <a class="uk-button uk-button-content uk-button-small uk-button-table-delete"
+                                <a class="uk-button uk-button-content uk-button-small uk-button-danger"
                                    href="{{ path('nodesRealmsDeletePage', {
                                        id: node.id,
                                        realmNodeId: nodeRealm.id,

diff --git a/lib/RoadizRozierBundle/templates/realms/add.html.twig b/lib/RoadizRozierBundle/templates/realms/add.html.twig
@@ -24,7 +24,7 @@
         <fieldset data-uk-margin>
             {% apply spaceless %}
                 <button data-action-save="#edit-realm-form"
-                        class="uk-button uk-button-primary rz-action-save" type="submit">
+                        class="uk-button uk-button-success rz-action-save" type="submit">
                     <span class="icon-container"><i class="uk-icon-rz-save"></i></span>
                     <span class="label"><span class="label-text">{% block content_form_submit_label %}
                                 {%- trans -%}save{%- endtrans -%}

diff --git a/lib/RoadizRozierBundle/templates/realms/list.html.twig b/lib/RoadizRozierBundle/templates/realms/list.html.twig
@@ -63,7 +63,7 @@
                                    data-uk-tooltip="{animation:true}">
                                     <i class="uk-icon-rz-pencil"></i>
                                 </a>
-                                <a class="uk-button uk-button-content uk-button-small uk-button-table-delete"
+                                <a class="uk-button uk-button-content uk-button-small uk-button-danger"
                                    href="{{ path('realmsDeletePage', { id: item.id }) }}"
                                    title="{% trans %}delete{% endtrans %}"
                                    data-uk-tooltip="{animation:true}">

diff --git a/lib/Rozier/src/Resources/app/less/actions_menu/actions_menu.less b/lib/Rozier/src/Resources/app/less/actions_menu/actions_menu.less
@@ -8,11 +8,6 @@
 @action-menu-H: 46px;
 @action-menu-W: @action-menu-H + @action-menu-border-size;
 @action-submenu-H: 36px;
-@separation-border-color: #DDDDDD;
-@item-global-color: #808080;
-@item-global-label-color: #999999;
-@item-global-border-color: #cecece;
-@item-global-background: #f9f9f9;
 @subnav-W: 240px;
 
 /* -------- STYLES -------- */
@@ -24,7 +19,7 @@
     background: @item-global-background;
     vertical-align: middle;
     border: 1px solid @item-global-border-color;
-    color: @item-global-color !important;
+    color: var(--global-text-lighter-color) !important;
     width: 32px;
     height: 32px;
     margin: 0;
@@ -62,7 +57,7 @@
         z-index: 9999;
         width: @action-menu-W;
         .box-sizing();
-        background:white;
+        background: var(--contrasted-bg);
         box-shadow: 3px 5px 30px rgba(0,0,0,0.1);
     }
 
@@ -83,9 +78,9 @@
             white-space: nowrap;
             text-align: left;
             padding: 6px 6px 6px (6px + @action-menu-border-size);
-            border-top: 1px solid @separation-border-color !important;
+            border-top: 1px solid var(--global-border-lighter-color) !important;
             background-image: none;
-            background-color: white;
+            background-color: var(--contrasted-bg);
             z-index: 999;
             justify-content: inherit;
 
@@ -102,9 +97,11 @@
             &:focus,
             &:hover {
                 &.uk-button-danger,
+                &.uk-button-success,
+                &.uk-button-warning,
                 &.uk-button-primary {
-                    border-color: @separation-border-color !important;
-                    background: white;
+                    border-color: var(--global-border-lighter-color) !important;
+                    background: var(--contrasted-bg);
                 }
                 i {
                     border-color: darken(@item-global-border-color, 10%) !important;
@@ -123,7 +120,13 @@
                 z-index: 99999;
             }
             &.uk-button-primary:before {
-                background-color: @contrast-color-darker;
+                background-color: var(--accent-color-darker);
+            }
+            &.uk-button-success:before {
+                background-color: @success-color;
+            }
+            &.uk-button-warning:before {
+                background-color: @warning-color;
             }
             &.uk-button-danger:before {
                 background-color: @alert-color;
@@ -136,7 +139,7 @@
         .uk-button {
             .icon-container {
                 position: absolute;
-                background-color: white;
+                background-color: var(--contrasted-bg);
                 top: 0;
                 right:0;
                 bottom:0;
@@ -165,7 +168,17 @@
 
             &.uk-button-primary {
                 .label-text {
-                    background-color: @contrast-color-darker;
+                    background-color: var(--accent-color-darker);
+                }
+            }
+            &.uk-button-success {
+                .label-text {
+                    background-color: @success-color;
+                }
+            }
+            &.uk-button-warning {
+                .label-text {
+                    background-color: @warning-color;
                 }
             }
             &.uk-button-danger {
@@ -306,7 +319,7 @@
                 white-space: nowrap;
                 text-align: left;
                 padding: 0 9px;
-                border-top: 1px solid @separation-border-color;
+                border-top: 1px solid var(--global-border-lighter-color);
                 background-color: @item-global-background;
                 .box-sizing();
                 line-height: @action-submenu-H;
@@ -349,7 +362,7 @@
                     top: @action-menu-border-size;
                 }
                 &:hover {
-                    background: white;
+                    background: var(--contrasted-bg);
                     i {
                         border-color: darken(@item-global-border-color, 10%);
                         color: darken(@item-global-color, 20%)

diff --git a/lib/Rozier/src/Resources/app/less/alerts/alerts.less b/lib/Rozier/src/Resources/app/less/alerts/alerts.less
@@ -8,7 +8,7 @@
     font-size: @default-font-size;
     font-weight: bold;
     background:#eaeaea;
-    color:@grey-medium;
+    color: var(--global-text-lighter-color);
     border-radius: 0px;
     .box-sizing();
     -webkit-font-smoothing: antialiased;
@@ -29,9 +29,9 @@
 }
 
 .uk-alert-success {
-    color: darken(@contrast-color-darker, 15%);
-    background: fade(@contrast-color-darker, 20%);
-    border-color: fade(@contrast-color-darker, 50%);
+    color: darken(@success-color, 15%);
+    background: fade(@success-color, 20%);
+    border-color: fade(@success-color, 50%);
     text-shadow: none;
 }
 
@@ -119,21 +119,33 @@ td.uk-alert {
     }
 }
 
+@media (min-width: 480px) {
+    .uk-notify {
+        max-width: 70vw;
+        width: 650px;
+    }
+    .uk-notify-bottom-center,
+    .uk-notify-top-center {
+        margin-left: 0;
+        transform: translateX(-50%);
+    }
+}
+
 .uk-notify-message {
     font-size: @default-font-size;
     font-weight: bold;
     line-height: 18px;
 
     &-success {
-        background: @contrast-color-darker;
-        border-color: darken(@contrast-color-darker, 5%);
+        background: @success-color;
+        border-color: darken(@success-color, 5%);
         color: white;
         text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
     }
 
     &-error {
         color: @alert-color;
-        border-color: rgba(@alert-color-red, @alert-color-green, @alert-color-blue, 0.5);
+        border-color: fade(@alert-color, 50%);
         background: #FFEEEE;
         text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
     }

diff --git a/lib/Rozier/src/Resources/app/less/autocomplete/autocomplete.less b/lib/Rozier/src/Resources/app/less/autocomplete/autocomplete.less
@@ -31,11 +31,9 @@
 }
 
 .ui-widget-content{
-
     .ui-state-focus{
         color:#333;
-        border:1px solid #dddddd;
+        border:1px solid var(--global-border-lighter-color);
         font-weight: normal;
     }
-
 }
diff --git a/lib/Rozier/src/Resources/app/less/badges/badges.less b/lib/Rozier/src/Resources/app/less/badges/badges.less
@@ -44,21 +44,21 @@
 
 .uk-badge-success{
     border-color: transparent;
-    background: @contrast-color;
+    background: @success-color;
     color: white;
     text-shadow: none;
 }
 
 .uk-badge-warning{
     border-color: transparent;
-    background: #F59E00;
+    background: @warning-color;
     color: white;
     text-shadow: none;
 }
 
 .uk-badge-danger{
     border-color: transparent;
-    background:@alert-color;
+    background: @alert-color;
     color: white;
     text-shadow: none;
 }

diff --git a/lib/Rozier/src/Resources/app/less/base/boilerplate.less b/lib/Rozier/src/Resources/app/less/base/boilerplate.less
@@ -15,7 +15,7 @@ button,
 input,
 select,
 textarea {
-    color: #222;
+    color: var(--global-text-color);
 }
 
 html {
@@ -89,7 +89,7 @@ textarea {
 .browsehappy {
     margin: 0.2em 0;
     background: #ccc;
-    color: #000;
+    color: var(--global-text-color);
     padding: 0.2em 0;
 }
 

diff --git a/lib/Rozier/src/Resources/app/less/base/normalize.less b/lib/Rozier/src/Resources/app/less/base/normalize.less
@@ -199,7 +199,7 @@ hr {
 
 mark {
     background: #ff0;
-    color: #000;
+    color: var(--global-text-color);
 }
 
 /**

diff --git a/lib/Rozier/src/Resources/app/less/breadcrumb/breadcrumb.less b/lib/Rozier/src/Resources/app/less/breadcrumb/breadcrumb.less
@@ -9,7 +9,7 @@
 
 /* -------- VARS -------- */
 
-@breadcrumb-link-hover : #808080;
+@breadcrumb-link-hover : @grey-medium;
 
 
 /* -------- STYLES -------- */
@@ -34,12 +34,12 @@
 }
 
 .node-breadcrumb-item{
-    color:@grey-medium;
+    color: var(--global-text-lighter-color);
     text-transform:uppercase;
 }
 
 .node-breadcrumb-link{
-    color:@grey-medium;
+    color: var(--global-text-lighter-color);
     transition: 0.4s color ease;
 
     .uk-icon-rz-breadcrumb-home{

diff --git a/lib/Rozier/src/Resources/app/less/bulk/bulk.less b/lib/Rozier/src/Resources/app/less/bulk/bulk.less
@@ -61,7 +61,7 @@
     padding:0 10px;
     font-size: @default-font-size;
     color: #333;
-    background: #EFEFEF;
+    background: var(--maincontent-bar-bg);
 }
 .tags-bulk-folder-cont,
 .documents-bulk-folder-cont,
-Original file line number
+Diff line change
@@ Expand Up / @@ -199,7 +199,7 @@ hr { @@
     mark {
         background: #ff0;
-        color: #000;
+        color: var(--global-text-color);
     }
     /**
@@ Expand Down @@