Skip to content
Snippets Groups Projects
Commit f709def6 authored by Sascha Eggenberger's avatar Sascha Eggenberger
Browse files

Modal, edit dark mode improvements

parent 2062ab7a
No related branches found
No related tags found
No related merge requests found
This diff is collapsed.
:root{--colorGinPrimary: #003cc5;--colorGinPrimaryHover: #0036b1;--colorGinPrimaryActive: #00339a;--colorGinPrimaryLight: rgba(0,60,197,0.15);--colorGinPrimaryLightHover: rgba(0,60,197,0.25);--colorGinPrimaryLightActive: rgba(0,60,197,0.35);--colorGinItemHover: #f3f4fa;--colorGinFocus: #e0714d;--colorGinDisabled: #bbb;--colorGinWarning: #e0ac00;--colorGinDanger: #c11f1f;--colorGinGreen: #26a769;--colorGinAppBackground: #f3f4fa;--colorGinLayerBackground: #fff;--colorGinLayer2Background: #e6ecf8;--colorGinBorder: #d4d4d8;--colorGinLayer2Border: #d4d4d8;--colorGinTitle:#222330;--colorGinText: #222330;--colorGinTextLight: #545560;--colorGinTableHeader: #dfe0e4;--colorGinSwitch: var(--colorGinGreen)}.gin--dark-mode{--colorGinPrimary: #90aeef;--colorGinPrimaryHover: #90aef2;--colorGinPrimaryActive: #a7bff4;--colorGinPrimaryLight: rgba(144,174,239,0.2);--colorGinPrimaryLightHover: rgba(144,174,239,0.3);--colorGinPrimaryLightActive: rgba(144,174,239,0.4);--colorGinItemHover: rgba(144,174,239,0.1);--colorGinFocus: #e0714d;--colorGinDisabled: #999;--colorGinWarning: #dec15f;--colorGinDanger: #ce6060;--colorGinGreen: #48ab7b;--colorGinAppBackground: #1B1B1D;--colorGinLayerBackground: #2A2A2D;--colorGinLayer2Background: #3B3B3F;--colorGinBorder: #43454a;--colorGinLayer2Border: #76777B;--colorGinTitle: #fff;--colorGinText: #ccc;--colorGinTextLight: #828386;--colorGinSelected: #47474c;--colorGinTableHeader: var(--colorGinAppBackground);--colorGinSwitch: var(--colorGinPrimary)}
:root{--colorGinPrimary: #003cc5;--colorGinPrimaryHover: #0036b1;--colorGinPrimaryActive: #00339a;--colorGinPrimaryLight: rgba(0,60,197,0.15);--colorGinPrimaryLightHover: rgba(0,60,197,0.25);--colorGinPrimaryLightActive: rgba(0,60,197,0.35);--colorGinItemHover: #f3f4fa;--colorGinFocus: #e0714d;--colorGinDisabled: #bbb;--colorGinWarning: #e0ac00;--colorGinDanger: #c11f1f;--colorGinGreen: #26a769;--colorGinAppBackground: #f3f4fa;--colorGinLayerBackground: #fff;--colorGinLayer2Background: #e6ecf8;--colorGinBorder: #d4d4d8;--colorGinLayer2Border: #d4d4d8;--colorGinTitle:#222330;--colorGinText: #222330;--colorGinTextLight: #545560;--colorGinTableHeader: #dfe0e4;--colorGinSwitch: var(--colorGinGreen)}.gin--dark-mode{--colorGinPrimary: #90aeef;--colorGinPrimaryHover: #90aef2;--colorGinPrimaryActive: #a7bff4;--colorGinPrimaryLight: rgba(144,174,239,0.2);--colorGinPrimaryLightHover: rgba(144,174,239,0.3);--colorGinPrimaryLightActive: rgba(144,174,239,0.4);--colorGinItemHover: rgba(144,174,239,0.1);--colorGinFocus: #e0714d;--colorGinDisabled: #999;--colorGinWarning: #dec15f;--colorGinDanger: #ce6060;--colorGinGreen: #48ab7b;--colorGinAppBackground: #1B1B1D;--colorGinLayerBackground: #2A2A2D;--colorGinLayer2Background: #3B3B3F;--colorGinBorder: #43454a;--colorGinLayer2Border: #76777B;--colorGinTitle: #fff;--colorGinText: #ccc;--colorGinTextLight: #828386;--colorGinTableHeader: var(--colorGinAppBackground);--colorGinSwitch: var(--colorGinPrimary)}
......@@ -4,7 +4,7 @@ fieldset:not(.fieldgroup) {
padding-left: 0;
padding-right: 0;
background: transparent;
border-color: #e6e4df;
border-color: var(--colorGinLayer2Border);
border-left: 0 none;
border-right: 0 none;
......
......@@ -6,7 +6,11 @@
}
.ui-dialog-titlebar {
background: #000;
background: #1b1b1d;
}
.ui-widget-content.ui-dialog-buttonpane {
background: var(--colorGinAppBackground);
}
.ui-dialog-titlebar-close {
......
......@@ -19,12 +19,6 @@
}
}
.form-item {
&__description {
color: var(--colorGinTextLight);
}
}
.form-textarea-wrapper {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
border-radius: 4px;
......@@ -35,6 +29,8 @@
}
.form-element--type-select {
padding-right: calc(2.5rem - 1px);
.gin--dark-mode & {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%23ffffff'/%3E%3C/svg%3E%0A");
}
......@@ -229,6 +225,13 @@ a.button--primary:focus:hover {
}
}
.button:disabled, .button.is-disabled {
.gin--dark-mode & {
color: var(--colorGinDisabled);
background-color: var(--colorGinLayer2Background);
}
}
.form-edit .form-actions {
padding: 0;
margin-bottom: 0;
......@@ -261,12 +264,17 @@ a.button--primary:focus:hover {
}
}
.fieldset,
.fieldset__label,
.fieldset__label--group,
.form-item__label {
color: var(--colorGinText);
}
.form-item__description,
.fieldset__description {
color: var(--colorGinTextLight);
}
.form-item__label.form-required::after,
.fieldset__label.form-required::after {
content: "*";
......
......@@ -16,6 +16,12 @@
}
}
.media-library-item__preview {
.gin--dark-mode & {
background: var(--colorGinLayer2Background);
}
}
.media-library-item__edit:hover,
.media-library-item__edit:focus,
.media-library-item__remove:hover,
......@@ -40,3 +46,96 @@
.media-library-item--grid {
background: none;
}
.media-library-widget-empty-text {
color: var(--colorGinTextLight);
}
.media-library-add-form__preview {
background: var(--colorGinAppBackground);
}
.media-library-add-form__input-wrapper {
padding: 0;
border: none;
background: transparent;
}
.media-library-menu {
border-color: var(--colorGinBorder);
background-color: var(--colorGinAppBackground);
}
.media-library-view {
.view-header {
padding: 1rem;
color: var(--colorGinText);
text-decoration: none;
background: var(--colorGinAppBackground);
border-radius: 4px;
}
}
.media-library-wrapper {
.views-display-link {
position: relative;
color: var(--colorGinText);
text-decoration: none;
background-image: none;
&:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
left: 0;
top: 1px;
background-color: var(--colorGinText);
}
&.is-active {
color: var(--colorGinPrimary);
&:before {
background-color: var(--colorGinPrimary);
}
}
}
.views-display-link-widget {
&:before {
mask-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23333333' d='M10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3A1.5 1.5 0 0 1 10.5 9zm-8 0h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3A1.5 1.5 0 0 1 2.5 9zm8-8h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3A1.5 1.5 0 0 1 10.5 1zm-8 0h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3A1.5 1.5 0 0 1 2.5 1z'/%3E%3C/svg%3E%0A");
}
}
.views-display-link-widget_table {
&:before {
mask-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23333333' d='M7 15a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zm-4.5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 9.5a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zm-4.5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 4a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zM2.5 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E%0A");
}
}
}
.media-library-content {
border-color: var(--colorGinBorder);
}
.media-library-menu__link {
color: var(--colorGinText);
text-shadow: none;
border-color: var(--colorGinBorder);
background-color: transparent;
&:active,
&:hover,
&:focus,
&.active {
color: var(--colorGinPrimary);
text-shadow: none;
background-color: var(--colorGinLayerBackground);
border-right: 0 none;
border-bottom: 1px solid var(--colorGinBorder);
box-shadow: none;
}
}
.pager__link {
background-color: transparent;
}
.pager__link.is-active,
.pager__item--current {
color: var(--colorGinAppBackground);
}
.pager__link:hover,
.pager__link.is-active:hover {
color: var(--colorGinAppBackground);
background: var(--colorGinPrimaryLight);
}
.pager__item--next .pager__link:after {
background-image: none;
background-color: var(--colorGinText);
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 14L11 8L5 2' stroke='%23545560' stroke-width='2'/%3E%3C/svg%3E%0A");
&:hover {
background-color: var(--colorGinPrimary);
}
}
......@@ -59,7 +59,7 @@ table {
td {
.gin--dark-mode & {
background-color: var(--colorGinSelected);
background-color: var(--colorGinPrimaryLight); //var(--colorGinSelected);
}
}
}
......
......@@ -116,7 +116,7 @@
width: 100%;
padding: 24px;
background: var(--colorGinLayerBackground);
border: 1px solid rgba(0,0,0,0.1); // #E2E2E5;
border: 1px solid var(--colorGinBorder);
box-sizing: border-box;
}
......
......@@ -58,7 +58,7 @@ $ginPrimary: #003cc5;
--colorGinText: #ccc;
--colorGinTextLight: #828386;
--colorGinSelected: #{lighten(#3B3B3F, 5)}; //#43454a;
--colorGinTableHeader: var(--colorGinAppBackground); //#161a1d;
// --colorGinSelected: #{lighten(#3B3B3F, 5)};
--colorGinTableHeader: var(--colorGinAppBackground);
--colorGinSwitch: var(--colorGinPrimary);
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment