feat(admin-plugin): fine tune styles

site/plugins/admin/assets/src/base/common.css

@@ -3,11 +3,18 @@ body
 {
     font-family: Roboto;
     font-size: var(--font-size);
+
+    @apply text-dark;
+}
+
+a
+{
+    @apply text-dark;
 }
 
 main
 {
-    @apply flex w-full h-screen min-w-full bg-white text-black;
+    @apply flex w-full h-screen min-w-full bg-white text-dark;
 }
 
 small
@@ -15,6 +22,14 @@ small
     @apply block mt-1 opacity-75 text-sm;
 }
 
+h1,
+h2,
+h3,
+h4
+{
+    @apply text-dark;
+}
+
 h1
 {
     @apply text-5xl;

site/plugins/admin/assets/src/base/icons.css

@@ -9,6 +9,8 @@
     height: 1rem;
 
     vertical-align: -.17rem;
+
+    @apply text-dark fill-current;
 }
 
 .icon--white > svg

site/plugins/admin/assets/src/components/buttons.css

@@ -10,7 +10,7 @@
 
 .button
 {
-    @apply rounded px-4 py-2 border border-solid border-black text-white inline-block w-auto bg-dark cursor-pointer;
+    @apply rounded px-4 py-2 border border-solid border-dark text-white inline-block w-auto bg-dark cursor-pointer;
 }
 
 .button--white
@@ -21,7 +21,7 @@
 .button:hover,
 .button--white:hover
 {
-    @apply border-black bg-black text-white;
+    @apply border-black bg-dark text-white;
 }
 
 .button-group
@@ -36,7 +36,7 @@
 
 .button-dropdown
 {
-    @apply rounded border border-solid border-black text-white inline-flex w-auto bg-dark cursor-pointer;
+    @apply rounded border border-solid border-dark text-white inline-flex w-auto bg-dark cursor-pointer;
 }
 
 .button-dropdown .button

site/plugins/admin/assets/src/components/forms.css

@@ -10,7 +10,7 @@
 
 .form-control-title
 {
-    @apply font-bold block mb-1;
+    @apply font-bold block mb-1 text-dark;
 }
 
 .form-control
@@ -21,7 +21,7 @@
 .form-control:active,
 .form-control:focus
 {
-    @apply border-black;
+    @apply border-dark;
 }
 
 .form-group

site/plugins/admin/assets/src/components/navigations.css

@@ -13,7 +13,7 @@
     width: var(--box-size);
     height: 100vh;
 
-    @apply flex flex-col fixed bg-dark border-black border-r border-solid text-white justify-between z-50;
+    @apply flex flex-col fixed bg-dark border-dark border-r border-solid text-white justify-between z-50;
 }
 
 .navigation__item
@@ -82,6 +82,11 @@
     @apply flex bg-dark-muted text-white  border-black border-b border-solid;
 }
 
+.navigation-top-secondary a
+{
+    @apply text-white;
+}
+
 .navigation-top-secondary__item
 {
     @apply ml-2 opacity-90;

site/plugins/admin/assets/src/components/tables.css

@@ -19,7 +19,7 @@
 
 .table > thead > tr > th
 {
-    @apply font-bold text-left text-black border-gray-000 border-b;
+    @apply font-bold text-left text-dark border-gray-000 border-b;
 }
 
 .table > tbody > tr > td,
@@ -29,7 +29,7 @@
 .table > thead > tr > th,
 .table > tfoot > tr > th
 {
-    @apply align-middle text-black border-gray-000 border-t border-b px-3 py-2;
+    @apply align-middle text-dark border-gray-000 border-t border-b px-3 py-2;
 }
 
 .table > tbody > tr > td:nth-child(2),

site/plugins/admin/assets/src/modules/codemirror.css

@@ -23,13 +23,14 @@
 {
     padding-right: 10px;
 
-    color: black;
     border-right: none;
+
+    @apply text-dark;
 }
 
 .CodeMirror-linenumber
 {
-    color: black;
+    @apply text-dark;
 }
 
 .CodeMirror pre

site/plugins/admin/assets/src/modules/select2.css

@@ -17,7 +17,7 @@
 
 .select2-container--default .select2-results__option--highlighted[aria-selected]
 {
-    @apply bg-gray-100 text-black;
+    @apply bg-gray-100 text-dark;
 }
 
 .select2-container--default .select2-search--dropdown .select2-search__field
@@ -41,7 +41,7 @@
 .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,
 .select2-container--default.select2-container--open.select2-container--above .select2-selection--single
 {
-    @apply border-black;
+    @apply border-dark;
 }
 
 .select2-selection.select2-selection--multiple
@@ -63,7 +63,7 @@
 
 .select2-container--default .select2-selection--multiple .select2-selection__choice:hover
 {
-    @apply border-black bg-black text-white opacity-100;
+    @apply border-dark bg-dark text-white opacity-100;
 }
 
 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove

site/plugins/admin/assets/src/modules/swal2.css

@@ -11,19 +11,19 @@
 
 .swal2-title
 {
-    @apply text-3xl font-normal text-black;
+    @apply text-3xl font-normal text-dark;
 }
 
 .swal2-content
 {
     font-size: var(--font-size);
-    @apply text-black;
+    @apply text-dark;
 }
 
 .swal2-styled.swal2-confirm
 {
     font-size: var(--font-size);
-    @apply px-4 py-2 border border-solid border-black text-white inline-block w-auto bg-dark rounded;
+    @apply px-4 py-2 border border-solid border-dark text-white inline-block w-auto bg-dark rounded;
 }
 
 .swal2-styled.swal2-confirm:focus
@@ -34,12 +34,12 @@
 .swal2-styled.swal2-cancel
 {
     font-size: var(--font-size);
-    @apply px-4 py-2 border border-solid border-black inline-block w-auto bg-white text-black rounded;
+    @apply px-4 py-2 border border-solid border-dark inline-block w-auto bg-white text-dark rounded;
 }
 
 .swal2-actions:not(.swal2-loading) .swal2-styled:hover
 {
-    @apply border-black bg-black text-white;
+    @apply border-dark bg-dark text-white;
 }
 
 .swal2-close:focus
@@ -55,6 +55,6 @@
 
 .swal2-popup.swal2-toast
 {
-    @apply bg-dark border border-solid border-black shadow-none;
+    @apply bg-dark border border-solid border-dark shadow-none;
 }
 /* purgecss end ignore */

site/plugins/admin/assets/src/modules/tabs.css

@@ -1,6 +1,6 @@
 .tabs__nav > div
 {
-    @apply rounded border border-solid border-black text-white bg-dark cursor-pointer mb-6;
+    @apply rounded border border-solid border-dark text-white bg-dark cursor-pointer mb-6;
 }
 
 .tabs__nav > div a:first-of-type

site/plugins/admin/templates/content/entries/media.html

@@ -2,85 +2,85 @@
 
 {% block content %}
 
-<form method="post" id="form" class="form-inline form-upload" enctype="multipart/form-data" action="{{ path_for('admin.entries.uploadMediaFileProcess') }}">
-    {{ csrf() }}
-    <input type="hidden" name="entry-id" value="{{ id }}">
-    <div class="input-group">
-      <div class="custom-file">
-        <input id="file" name="file" type="file" class="custom-file-input" id="inputGroupFile" aria-describedby="inputGroupFileAddon">
-        <label class="custom-file-label" data-browse="{{ tr('admin_browse_files') }}" for="inputGroupFileAddon"></label>
-      </div>
-      <div class="input-group-append">
-          <input type="submit" id="upload_file" name="upload_file" value="{{ tr('admin_upload') }}" class="buttonbtn-outline-secondary">
-      </div>
+    <form method="post" id="form" class="form-inline form-upload" enctype="multipart/form-data" action="{{ path_for('admin.entries.uploadMediaFileProcess') }}">
+        {{ csrf() }}
+        <input type="hidden" name="entry-id" value="{{ id }}">
+        <div class="input-group">
+            <div class="custom-file">
+                <input id="inputGroupFile" name="file" type="file" class="custom-file-input" aria-describedby="inputGroupFileAddon">
+                <label class="custom-file-label" data-browse="{{ tr('admin_browse_files') }}" for="inputGroupFileAddon"></label>
+            </div>
+            <div class="input-group-append">
+                <input type="submit" id="upload_file" name="upload_file" value="{{ tr('admin_upload') }}" class="buttonbtn-outline-secondary">
+            </div>
+        </div>
+    </form>
+
+    <br>
+    {% set allowed_files = ['jpeg', 'png', 'gif', 'jpg'] %}
+    <div class="media-manager">
+        <div class="row">
+            {% for file in files %}
+                <div class="col-sm-2">
+                    <div class="item">
+
+                        <a
+                            href="javascript:;"
+                            {% if (filesystem_ext(file) in allowed_files) %}
+                            style="background: #000;"
+                            {% else %}
+                            {% endif %}
+                            class="img-item js-entries-image-preview"
+                            data-media-id="{{ filesystem_basename(file) }}"
+                            data-entry-id="{{ id }}"
+                            data-image-url="{{ base_url() }}/images{{ id }}/{{ filesystem_basename(file) }}">
+                            <i class="fas fa-eye"></i>
+                            {% if (filesystem_ext(file) in allowed_files) %}
+                            {% else %}
+                                <span class="file-ext">{{ filesystem_ext(file) }}</span>
+                            {% endif %}
+                        </a>
+
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
     </div>
-</form>
 
-<br>
-
-<div class="media-manager">
-    <div class="row">
-        {% for file in files %}
-            <div class="col-sm-2">
-                <div class="item">
-                    <a href="javascript:;"
-                       {% if (filesystem_ext(file) in ['jpeg', 'png', 'gif', 'jpg']) %}
-                       style="background-image: url('{{ base_url() }}/image/{{ id }}/{{ filesystem_basename(file) }}?w=200');"
-                       {% else %}
-                       style="background: #000;"
-                       {% endif %}
-                       class="img-item js-entries-image-preview"
-                       data-media-id="{{ filesystem_basename(file) }}"
-                       data-entry-id="{{ id }}"
-                       data-image-url="{{ base_url() }}/image/{{ id }}/{{ filesystem_basename(file) }}">
-                       <i class="fas fa-eye"></i>
-                       {% if (filesystem_ext(file) in ['jpeg', 'png', 'gif', 'jpg']) %}
-                       {% else %}
-                       <span class="file-ext">{{ filesystem_ext(file) }}</span>
-                       {% endif %}
-                    </a>
+    <div class="modal animated fadeIn faster image-preview-modal" id="entriesImagePreview" tabindex="-1" role="dialog" aria-labelledby="entriesImagePreviewLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="entriesImagePreviewLabel">{{ tr('admin_preview') }}</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body js-entry-image-preview-placeholder image-preview"></div>
+                <div class="modal-footer">
+                    <input type="text" name="" class="form-control js-entry-image-url-placeholder" value="">
+                    <form id="delete-media-file" action="{{ path_for('admin.entries.deleteMediaFileProcess') }}" method="POST" style="display: none;">
+                        {{ csrf() }}
+                        <input type="hidden" name="media-id" class="js-media-id" value="">
+                        <input type="hidden" name="entry-id" class="js-entry-id" value="">
+                    </form>
+                    <a class="buttonbtn-primary" href="javascript:;" onclick="event.preventDefault();
+                      document.getElementById('delete-media-file').submit();">{{ tr('admin_delete') }}</a>
 
                 </div>
             </div>
-        {% endfor %}
+        </div>
     </div>
-</div>
-
-<div class="modal animated fadeIn faster image-preview-modal" id="entriesImagePreview" tabindex="-1" role="dialog" aria-labelledby="entriesImagePreviewLabel" aria-hidden="true">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="entriesImagePreviewLabel">{{ tr('admin_preview') }}</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body js-entry-image-preview-placeholder image-preview"></div>
-      <div class="modal-footer">
-          <input type="text" name="" class="form-control js-entry-image-url-placeholder" value="">
-          <form id="delete-media-file" action="{{ path_for('admin.entries.deleteMediaFileProcess') }}" method="POST" style="display: none;">
-              {{ csrf() }}
-              <input type="hidden" name="media-id" class="js-media-id" value="">
-              <input type="hidden" name="entry-id" class="js-entry-id" value="">
-          </form>
-          <a class="buttonbtn-primary" href="javascript:;"
-             onclick="event.preventDefault();
-                      document.getElementById('delete-media-file').submit();">{{ tr('admin_delete') }}</a>
-
-      </div>
-    </div>
-  </div>
-</div>
 {% endblock %}
 
 {% block tail %}
-<script type="text/javascript">
-$('.js-entries-image-preview').click(function () {
-    $('#entriesImagePreview').modal();
-    $('.js-entry-image-preview-placeholder').css('background-image', 'url(' + $(this).attr('data-image-url') + ')');
-    $('.js-entry-image-url-placeholder').val($(this).attr('data-image-url'));
-    $('.js-media-id').attr('value', $(this).attr('data-media-id'));
-    $('.js-entry-id').attr('value', $(this).attr('data-entry-id'));
-});
-</script>
-{% endblock %}
+    <script type="text/javascript">
+        $('.js-entries-image-preview').click(function () {
+            $('#entriesImagePreview').modal();
+            $('.js-entry-image-preview-placeholder').css('background-image', 'url(' + $(this).attr('data-image-url') + ')');
+            $('.js-entry-image-url-placeholder').val($(this).attr('data-image-url'));
+            $('.js-media-id').attr('value', $(this).attr('data-media-id'));
+            $('.js-entry-id').attr('value', $(this).attr('data-entry-id'));
+        });
+    </script>
+{% endblock %}