mirror/librenms-librenms
1
0
Fork 0
mirror of https://github.com/librenms/librenms.git synced 2024-10-07 16:52:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve tailwind dark theme colors (#13262)

Browse Source 
* Improve tailwind dark theme colors
Import the dark theme colors into the Tailwind color palette
update components to use those new colors

* remove colors import, it isn't used right now
This commit is contained in:
Tony Murray
2021-09-23 08:38:41 -05:00
committed by GitHub
parent c579de7ea7
commit 2687fc509e
7 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
html/css/app.css
View File

File diff suppressed because one or more lines are too long

2
html/css/dark.css
View File

@ -7220,7 +7220,7 @@
background: #2d3237!important;
}
div[role=listbox]{
background: rgb(70, 76, 83);
background: #464c53;
}
.overlib, .overlib-contents{
background: #353a41;

2
html/mix-manifest.json
View File

@ -2,7 +2,7 @@
"/js/app.js": "/js/app.js?id=5fb72abe404b2429231c",
"/js/manifest.js": "/js/manifest.js?id=8d61162bb0caf92f60ff",
"/css/vendor.css": "/css/vendor.css?id=8d7b2ecb46047fe813e4",
"/css/app.css": "/css/app.css?id=b21e1df1f5102369eabc",
"/css/app.css": "/css/app.css?id=cff4bdc70b4433113ccc",
"/js/vendor.js": "/js/vendor.js?id=294cef17a3cf43045d61",
"/js/lang/de.js": "/js/lang/de.js?id=8959e785f5790d6b6836",
"/js/lang/en.js": "/js/lang/en.js?id=cad37e39e9721bd08fdd",

2
resources/views/components/device-link.blade.php
View File

@ -1,5 +1,5 @@
<x-popup>
<a class="tw-font-bold @if($status=='disabled') tw-text-gray-400 visited:tw-text-gray-400 @elseif($status=='down') tw-text-red-600 visited:tw-text-red-600 @else tw-text-blue-900 visited:tw-text-blue-900 @endif" href="{{ route('device', ['device' => $device->device_id, 'tab' => $tab, 'section' => $section]) }}">
<a class="tw-font-bold @if($status=='disabled') tw-text-gray-400 visited:tw-text-gray-400 @elseif($status=='down') tw-text-red-600 visited:tw-text-red-600 @else tw-text-blue-900 visited:tw-text-blue-900 dark:tw-text-dark-white-100 dark:visited:tw-text-dark-white-100 @endif" href="{{ route('device', ['device' => $device->device_id, 'tab' => $tab, 'section' => $section]) }}">
{{ $slot->isNotEmpty() ? $slot : $device->displayName() }}
</a>
<x-slot name="title">

4
resources/views/components/popup.blade.php
View File

@ -37,11 +37,11 @@
x-on:mouseenter="clearTimeout(hideTimeout)"
x-on:mouseleave="hide(delay)"
x-bind:class="{'tw-hidden': !popupShow, 'tw-block': popupShow}"
class="tw-hidden tw-bg-white dark:tw-bg-gray-800 dark:tw-text-white tw-border-2 tw-border-gray-200 dark:tw-border-gray-600 tw-ml-3 tw-z-50 tw-font-normal tw-leading-normal tw-text-sm tw-text-left tw-no-underline tw-rounded-lg"
class="tw-hidden tw-bg-white dark:tw-bg-dark-gray-300 dark:tw-text-white tw-border-2 tw-border-gray-200 dark:tw-border-dark-gray-200 tw-ml-3 tw-z-50 tw-font-normal tw-leading-normal tw-text-sm tw-text-left tw-no-underline tw-rounded-lg"
style="max-width:95vw;"
>
@isset($title)
<div class="tw-opacity-90 tw-p-3 tw-mb-0 tw-border-b-2 tw-border-solid tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-t-lg">
<div class="tw-opacity-90 tw-p-3 tw-mb-0 tw-border-b-2 tw-border-solid tw-border-gray-200 dark:tw-border-dark-gray-200 tw-rounded-t-lg">
{{ $title }}
</div>
@endisset

2
resources/views/components/port-link.blade.php
View File

@ -1,5 +1,5 @@
<x-popup>
<a class="@if($status=='disabled') tw-text-gray-400 visited:tw-text-gray-400 @elseif($status=='down') tw-text-red-600 visited:tw-text-red-600 @else tw-text-blue-900 visited:tw-text-blue-900 @endif"
<a class="@if($status=='disabled') tw-text-gray-400 visited:tw-text-gray-400 @elseif($status=='down') tw-text-red-600 visited:tw-text-red-600 @else tw-text-blue-900 visited:tw-text-blue-900 dark:tw-text-dark-white-100 dark:visited:tw-text-dark-white-100 @endif"
href="{{ $link }}"
{{ $attributes }}>
{{ $slot->isNotEmpty() ? $slot : $label }}

16
tailwind.config.js
View File

@ -8,7 +8,21 @@ module.exports = {
],
darkMode: 'class',
theme: {
extend: {},
extend: {
colors: {
dark: {
'gray-100': '#4f565d',
'gray-200': '#3e444c',
'gray-300': '#353a41',
'gray-400': '#2e3338',
'gray-500': '#272b30',
'white-100': '#f9fafb',
'white-200': '#c8c8c8',
'white-300': '#bebfbf',
'white-400': '#acb6bf',
}
}
},
screens: {
'sm': '576px',
'md': '768px',