theme updates

2021-04-20 16:21:33 +02:00
parent fb7fb4e4f9
commit 641aa4314d
8 changed files with 21 additions and 11 deletions
@@ -140,7 +140,7 @@ a.ui-table-row:hover, button.ui-table-row:hover
  &.is-name .ui-icon
  {
    margin-left: .6em;
-    color: var(--color-synchronized);
+    color: var(--color-text-dim); //var(--color-synchronized);
  }
 }

@@ -12,8 +12,8 @@ list.onFetch(filter => CountriesApi.getByQuery(filter));

 list.column('flag', { width: 62, canSort: false, hideLabel: true }).custom((value, model) => `<i class="ui-icon" data-symbol="flag-${model.code.toLowerCase()}"></i>`, true, 'flag');
 list.column('name').name();
-list.column('code').text();
-list.column('isPreferred', { width: 200 }).boolean();
+list.column('code').custom(val => val.toUpperCase());
+list.column('isPreferred').boolean();
 list.column('isActive').active();

 export default list;
@@ -343,6 +343,8 @@ button::-moz-focus-inner
    padding: 5px;
    font-size: 0;
    color: transparent;
+    background: var(--color-image-bg);
+    border-radius: var(--radius);
    
    img
    {
@@ -4,6 +4,7 @@
 :root
 {
  --color-negative: rgb(216, 40, 83);
+  --color-image-bg: rgb(255, 255, 255);
  
  // message colors
  --color-accent-info: rgb(44, 162, 212);
@@ -2,9 +2,9 @@
 .theme-dark
 {
  // accent colors
-  $color-primary: #0d83f0; //#f9c202; //#0d83f0; #22272e
+  $color-primary: #16c6a5; //#f9c202; //#0d83f0; #22272e
  $color-primary-fg: #fff;
-  $color-primary-low: #{rgba(#0d83f0, 0.2)};
+  $color-primary-low: #{rgba(#ff8900, 0.2)};
  $color-secondary: #94c4bb;
  $color-secondary-fg: #fff;
  $color-tertiary: #c4e4de;
@@ -12,7 +12,7 @@

  // foreground colors
  $color-fg: #fafafa;
-  $color-fg-shade-1: #81878a; // dim
+  $color-fg-shade-1: #aaacaf; // dim
  $color-fg-shade-2: #8c9094; // dim-two
  
  // background colors  
@@ -99,8 +99,8 @@
  --color-checked-fg: #{$color-primary-fg};
  --color-toggle: #{$color-bg-shade-3};
  --color-toggle-fg: #{$color-fg};
-  --color-toggled: #{$color-fg};
-  --color-toggled-fg: #{$color-bg-shade-3};
+  --color-toggled: #{$color-primary};
+  --color-toggled-fg: #{$color-primary-fg};
  --color-input-focus-bg: #{$color-bg-shade-1};
  --color-input-focus-border: 1px solid #{$color-bg-shade-5}; 
  --color-input-focus-shadow: 0 0 0 4px #{$color-bg-shade-2};
@@ -133,6 +133,7 @@
  --color-table-line-vertical: transparent;
  --color-table-head: #{$color-bg-shade-1};
  --color-table-hover: #{$color-bg-shade-2};
+  --color-table-highlight: #{$color-bg-shade-3};

  // misc
  --color-required-marker: #{$color-fg-shade-1};
@@ -2,9 +2,9 @@
 :root, .theme-light
 {
  // accent colors
-  $color-primary: #0d83f0;// #22272e
+  $color-primary: #ff8900;// #22272e
  $color-primary-fg: #fff; 
-  $color-primary-low: #{rgba(#0d83f0, 0.2)};
+  $color-primary-low: #{rgba(#ff8900, 0.2)};
  $color-secondary: #0d83f0;
  $color-secondary-fg: #fff;
  $color-tertiary: #c4e4de;
@@ -113,6 +113,7 @@
  --color-table-line-vertical: transparent; //#{$color-bg-shade-3};
  --color-table-head: #{$color-bg-shade-2};
  --color-table-hover: #{$color-bg-shade-2};
+  --color-table-highlight: #{$color-bg-shade-3};

  // misc
  --color-required-marker: #{$color-primary};
@@ -213,6 +213,11 @@ class ListColumn
    {
      let html = '<b>' + value + '</b>';

+      if (model.isActive === false)
+      {
+        html = value;
+      }
+
      if (model.blueprint && model.blueprint.id)
      {
        html += ` <svg class="ui-icon" width="15" height="15" stroke-width="2" :data-symbol="fth-cloud" title="Synchronized"><use xlink:href="#fth-cloud" /></svg>`;
@@ -22,7 +22,7 @@
  </environment>
  <title>zero</title>
 </head>
-<body class="theme-light theme-roundedx">
+<body class="theme-dark theme-roundedx">
  <div id="app"></div>
  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    @Html.Raw(Model.Vue.GetIconSvg())