add assets

assets/admin/css/widgets.css

@@ -22,26 +22,25 @@
 }
 
 .selector-available h2, .selector-chosen h2 {
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     border-radius: 4px 4px 0 0;
 }
 
 .selector-chosen h2 {
-    background: #79aec8;
-    color: #fff;
+    background: var(--primary);
+    color: var(--header-link-color);
 }
 
 .selector .selector-available h2 {
-    background: #f8f8f8;
-    color: #666;
+    background: var(--darkened-bg);
+    color: var(--body-quiet-color);
 }
 
 .selector .selector-filter {
-    background: white;
-    border: 1px solid #ccc;
+    border: 1px solid var(--border-color);
     border-width: 0 1px;
     padding: 8px;
-    color: #999;
+    color: var(--body-quiet-color);
     font-size: 10px;
     margin: 0;
     text-align: left;
@@ -66,7 +65,7 @@
 .selector ul.selector-chooser {
     float: left;
     width: 22px;
-    background-color: #eee;
+    background-color: var(--selected-bg);
     border-radius: 10px;
     margin: 10em 5px 0 5px;
     padding: 0;
@@ -91,7 +90,7 @@
     text-indent: -3000px;
     overflow: hidden;
     cursor: default;
-    opacity: 0.3;
+    opacity: 0.55;
 }
 
 .active.selector-add, .active.selector-remove {
@@ -126,14 +125,14 @@ a.selector-chooseall, a.selector-clearall {
     overflow: hidden;
     font-weight: bold;
     line-height: 16px;
-    color: #666;
+    color: var(--body-quiet-color);
     text-decoration: none;
-    opacity: 0.3;
+    opacity: 0.55;
 }
 
 a.active.selector-chooseall:focus, a.active.selector-clearall:focus,
 a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
-    color: #447e9b;
+    color: var(--link-fg);
 }
 
 a.active.selector-chooseall, a.active.selector-clearall {
@@ -261,7 +260,7 @@ p.datetime {
     line-height: 20px;
     margin: 0;
     padding: 0;
-    color: #666;
+    color: var(--body-quiet-color);
     font-weight: bold;
 }
 
@@ -269,7 +268,7 @@ p.datetime {
     white-space: nowrap;
     font-weight: normal;
     font-size: 11px;
-    color: #ccc;
+    color: var(--body-quiet-color);
 }
 
 .datetime input, .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
@@ -313,7 +312,7 @@ table p.datetime {
 
 .timezonewarning {
     font-size: 11px;
-    color: #999;
+    color: var(--body-quiet-color);
 }
 
 /* URL */
@@ -322,7 +321,7 @@ p.url {
     line-height: 20px;
     margin: 0;
     padding: 0;
-    color: #666;
+    color: var(--body-quiet-color);
     font-size: 11px;
     font-weight: bold;
 }
@@ -337,7 +336,7 @@ p.file-upload {
     line-height: 20px;
     margin: 0;
     padding: 0;
-    color: #666;
+    color: var(--body-quiet-color);
     font-size: 11px;
     font-weight: bold;
 }
@@ -355,7 +354,7 @@ p.file-upload {
 }
 
 span.clearable-file-input label {
-    color: #333;
+    color: var(--body-fg);
     font-size: 11px;
     display: inline;
     float: none;
@@ -368,8 +367,9 @@ span.clearable-file-input label {
     font-size: 12px;
     width: 19em;
     text-align: center;
-    background: white;
-    border: 1px solid #ddd;
+    background: var(--body-bg);
+    color: var(--body-fg);
+    border: 1px solid var(--hairline-color);
     border-radius: 4px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
     overflow: hidden;
@@ -397,20 +397,20 @@ span.clearable-file-input label {
     margin: 0;
     text-align: center;
     border-top: none;
-    background: #f5dd5d;
     font-weight: 700;
     font-size: 12px;
     color: #333;
+    background: var(--accent);
 }
 
 .calendar th {
     padding: 8px 5px;
-    background: #f8f8f8;
-    border-bottom: 1px solid #ddd;
+    background: var(--darkened-bg);
+    border-bottom: 1px solid var(--border-color);
     font-weight: 400;
     font-size: 12px;
     text-align: center;
-    color: #666;
+    color: var(--body-quiet-color);
 }
 
 .calendar td {
@@ -418,17 +418,17 @@ span.clearable-file-input label {
     font-size: 12px;
     text-align: center;
     padding: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--hairline-color);
     border-bottom: none;
 }
 
 .calendar td.selected a {
-    background: #79aec8;
-    color: #fff;
+    background: var(--primary);
+    color: var(--button-fg);
 }
 
 .calendar td.nonday {
-    background: #f8f8f8;
+    background: var(--darkened-bg);
 }
 
 .calendar td.today a {
@@ -440,17 +440,17 @@ span.clearable-file-input label {
     font-weight: 400;
     padding: 6px;
     text-decoration: none;
-    color: #444;
+    color: var(--body-quiet-color);
 }
 
 .calendar td a:focus, .timelist a:focus,
 .calendar td a:hover, .timelist a:hover {
-    background: #79aec8;
+    background: var(--primary);
     color: white;
 }
 
 .calendar td a:active, .timelist a:active {
-    background: #417690;
+    background: var(--header-bg);
     color: white;
 }
 
@@ -464,16 +464,16 @@ span.clearable-file-input label {
 
 .calendarnav a:link, #calendarnav a:visited,
 #calendarnav a:focus, #calendarnav a:hover {
-    color: #999;
+    color: var(--body-quiet-color);
 }
 
 .calendar-shortcuts {
-    background: white;
+    background: var(--body-bg);
+    color: var(--body-quiet-color);
     font-size: 11px;
     line-height: 11px;
-    border-top: 1px solid #eee;
+    border-top: 1px solid var(--hairline-color);
     padding: 8px 0;
-    color: #ccc;
 }
 
 .calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
@@ -511,8 +511,8 @@ span.clearable-file-input label {
     padding: 4px 0;
     font-size: 12px;
     background: #eee;
-    border-top: 1px solid #ddd;
-    color: #333;
+    border-top: 1px solid var(--border-color);
+    color: var(--body-fg);
 }
 
 .calendar-cancel:focus, .calendar-cancel:hover {