From 7ad447ba496139774b8ff8228f6b22f5ab205bfb Mon Sep 17 00:00:00 2001 From: Daryl Knight Date: Fri, 1 Apr 2022 13:32:04 +0300 Subject: [PATCH] Added styles for Redactor & Matrix blocks --- dist/css/cp.css | 2 +- dist/mix-manifest.json | 2 +- src/cp.scss | 150 ++++++++++++++++++++++++++++++++--------- 3 files changed, 119 insertions(+), 35 deletions(-) diff --git a/dist/css/cp.css b/dist/css/cp.css index 8e5fe3d..20e6944 100644 --- a/dist/css/cp.css +++ b/dist/css/cp.css @@ -1 +1 @@ -:root{--nav-hover-color:#fff;--nav-hover-background:#42464d;--muted-color:#aaa;--red:#ed4245;--green:#3aa65d;--orange:#faa919;--input-background:#40444b;--dark:#202225;--medium:#2f3136;--body:#37393f}.warning{color:var(--orange)!important}.success{color:var(--green)!important}body,html{background-color:var(--body);color:#fff}body.fixed-header #header{background-color:var(--dark);border-bottom:1px solid #2c2e32}#global-sidebar,#system-info{background-color:#2f3136}#global-sidebar :not(.has-subnav)>a[href]:not(.sel):hover,#global-sidebar>a[href]:not(.sel):hover{background-color:var(--nav-hover-background)}#global-sidebar :not(.has-subnav)>a[href].active,#global-sidebar :not(.has-subnav)>a[href]:active,#global-sidebar :not(.has-subnav)>a[href]:hover,#global-sidebar>a[href].active,#global-sidebar>a[href]:active,#global-sidebar>a[href]:hover{color:var(--nav-hover-color)}#global-header{background:var(--body);border-bottom:1px solid var(--dark);box-shadow:none}a.sel{background-color:var(--nav-hover-background)!important;box-shadow:none!important;color:var(--nav-hover-color)!important}.sidebar .heading span{color:#4f545c}.sidebar nav li a{color:#97989d}#sidebar nav li a:not(.sel):hover{background-color:var(--nav-hover-background);color:var(--nav-hover-color)}.content-pane{background-color:#43454d;box-shadow:none}#content .pane,.message .body,.pane .pane{background-color:var(--input-background)}.message .body{color:#ccc}ul.icons li a{border:none;color:#96989d}ul.icons li a:hover{background-color:#33353b;color:#fff}ul.icons li a:hover .icon.icon-mask svg circle,ul.icons li a:hover .icon.icon-mask svg ellipse,ul.icons li a:hover .icon.icon-mask svg line,ul.icons li a:hover .icon.icon-mask svg path,ul.icons li a:hover .icon.icon-mask svg polygon,ul.icons li a:hover .icon.icon-mask svg polyline,ul.icons li a:hover .icon.icon-mask svg rect,ul.icons li a:hover .icon.icon-mask svg text{fill:#fff}ul.icons li a .icon.icon-mask svg circle,ul.icons li a .icon.icon-mask svg ellipse,ul.icons li a .icon.icon-mask svg line,ul.icons li a .icon.icon-mask svg path,ul.icons li a .icon.icon-mask svg polygon,ul.icons li a .icon.icon-mask svg polyline,ul.icons li a .icon.icon-mask svg rect,ul.icons li a .icon.icon-mask svg text{fill:#babbbe}.btn{background-color:#2f3136;color:#babbbe}.btn:hover,.field>.heading>label,.field>.heading>legend{color:#fff}.notice{color:#01b0f5!important}a,a.go{color:#01b0f5}.select:not(.selectize) select,.selectize.select .selectize-control .selectize-input{color:#fff}.checkboxfield .instructions,.field>.heading>.instructions,.field>.instructions{color:#b9babc}.border-box,.matrix-configurator>.field>.input,.multiselect>select,.passwordwrapper,.selectize-text>.selectize-control>.selectize-input,.selectize.multiselect .selectize-control.multi .selectize-input,.text:not(.selectize-text){background-color:var(--input-background);color:#fff}#announcements-btn.unread:after{background-color:var(--red)}table.data thead td,table.data thead th{background-color:var(--nav-hover-background);color:var(--nav-hover-color)}table.data thead th.orderable:not(.ordered):hover,table.data thead th.ordered{background-color:var(--dark)}table.data tbody tr:not(.disabled):hover td,table.data tbody tr:not(.disabled):hover th{background-color:#38393f;color:var(--nav-hover-color)}#footer{background-color:var(--nav-hover-background)}.light{color:#fff!important}#app-info{color:var(--muted-color)}hr{border-top:1px solid var(--medium)}#details .meta{box-shadow:none!important}#details .meta.read-only{background-color:#2f3136}#details .meta:not(.read-only):not(.warning){background-color:var(--medium)} +:root{--nav-hover-background:#42464d;--muted-color:#aaa;--red:#ed4245;--green:#3aa65d;--orange:#faa919;--dark:#202225;--light:#97989d;--medium:#2f3136}.warning{color:var(--orange)!important}.success{color:var(--green)!important}a,a.go{color:#01b0f5}a.sel{background-color:var(--nav-hover-background);box-shadow:none;color:#fff}body,html{background-color:var(--medium);color:#fff}body.fixed-header #header{border-bottom:1px solid #2c2e32}#global-sidebar,#system-info,body.fixed-header #header{background-color:var(--dark)}#global-sidebar a{color:var(--light)}#global-sidebar :not(.has-subnav)>a[href]:not(.sel):hover,#global-sidebar>a[href]:not(.sel):hover{background-color:var(--nav-hover-background)}#global-sidebar :not(.has-subnav)>a[href].active,#global-sidebar :not(.has-subnav)>a[href]:active,#global-sidebar :not(.has-subnav)>a[href]:hover,#global-sidebar>a[href].active,#global-sidebar>a[href]:active,#global-sidebar>a[href]:hover{color:#fff}#global-header{background:var(--body);border-bottom:1px solid var(--dark);box-shadow:none}#nav li:not(.has-subnav)>a.sel{background-color:var(--nav-hover-background);color:#fff}.sidebar .heading span{color:#4f545c}.sidebar nav li a{color:var(--light)}#sidebar nav li a.sel,#sidebar nav li a:not(.sel):hover{background-color:var(--nav-hover-background);color:#fff}#sidebar nav li a.sel{box-shadow:none}.content-pane,.pane-tabs ul li a.sel{background-color:#42464d;box-shadow:none;color:#fff}#content .pane-header{background-color:#333}#content .message .body,#content .pane{background-color:#5a5960}.message .body{background-color:var(--nav-hover-background);color:#ccc}ul.icons li a{border:none;color:#96989d}ul.icons li a:hover{background-color:#33353b;color:#fff}ul.icons li a:hover .icon.icon-mask svg circle,ul.icons li a:hover .icon.icon-mask svg ellipse,ul.icons li a:hover .icon.icon-mask svg line,ul.icons li a:hover .icon.icon-mask svg path,ul.icons li a:hover .icon.icon-mask svg polygon,ul.icons li a:hover .icon.icon-mask svg polyline,ul.icons li a:hover .icon.icon-mask svg rect,ul.icons li a:hover .icon.icon-mask svg text{fill:#fff}ul.icons li a .icon.icon-mask svg circle,ul.icons li a .icon.icon-mask svg ellipse,ul.icons li a .icon.icon-mask svg line,ul.icons li a .icon.icon-mask svg path,ul.icons li a .icon.icon-mask svg polygon,ul.icons li a .icon.icon-mask svg polyline,ul.icons li a .icon.icon-mask svg rect,ul.icons li a .icon.icon-mask svg text{fill:#babbbe}.btn{background-color:#606e7b}.btn,.btn:after,.btn:before,.btn:hover{color:#fff}.btn.dashed,.copytextbtn{border:1px solid #666}.btn.dashed input,.btn.dashed span,.copytextbtn input,.copytextbtn span{color:#999}#toolbar .btn,#toolbar .text{border:1px solid transparent;color:#fff}.field>.heading>label,.field>.heading>legend{color:#fff}#content :not(.meta)>.flex-fields>:not(h2):not(hr):before,#content :not(.meta)>.flex-fields>:not(h2):not(hr):last-child:before{visibility:hidden}.field>.status-badge.outdated{background-color:var(--orange)}.notice{color:#01b0f5!important}.select:not(.selectize) select,.selectize.select .selectize-control .selectize-input{color:#fff}.checkboxfield .instructions,.field>.heading>.instructions,.field>.instructions{color:#b9babc}.border-box,.matrix-configurator>.field>.input,.multiselect>select,.passwordwrapper,.selectize-text>.selectize-control>.selectize-input,.selectize.multiselect .selectize-control.multi .selectize-input,.text:not(.selectize-text){background-color:var(--nav-hover-background);color:#fff}#announcements-btn.unread:after{background-color:var(--red)}table.data thead td,table.data thead th{background-color:var(--nav-hover-background);color:#fff}table.data thead th.orderable:not(.ordered):hover,table.data thead th.ordered{background-color:var(--medium)}table.data tbody tr:not(.disabled):hover td,table.data tbody tr:not(.disabled):hover th{background-color:#38393f;color:#fff}#footer{background-color:var(--nav-hover-background)}.light{color:#fff!important}#app-info{color:var(--muted-color)}hr{border-top:1px solid var(--medium)}#details .meta{box-shadow:none!important}#details .meta.read-only,#details .meta:not(.read-only):not(.warning),.ps-wrapper .ps-sidebar{background-color:var(--dark)}.text-grey-darkest,ul.categories li a{color:var(--light)}.matrixblock{background-color:#3b3a43}.matrixblock>.titlebar{background-color:var(--medium)}.redactor .redactor-box:not(.redactor-box-fullscreen):not(.redactor-source-view){background-color:var(--nav-hover-background)!important}.redactor-box .redactor-styles{color:#dcddde!important}.redactor-air a,.redactor-toolbar a{color:#fff!important} diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json index 21b0f59..00fc784 100644 --- a/dist/mix-manifest.json +++ b/dist/mix-manifest.json @@ -1,3 +1,3 @@ { - "/css/cp.css": "/css/cp.css?id=b88dc281d7d82db814dca53133b4e88f" + "/css/cp.css": "/css/cp.css?id=18e63c16eeab1a2bd064e4bb1bb98fcc" } diff --git a/src/cp.scss b/src/cp.scss index d3ed984..adba7d6 100644 --- a/src/cp.scss +++ b/src/cp.scss @@ -1,15 +1,13 @@ // Variables :root { - --nav-hover-color: white; --nav-hover-background: #42464d; --muted-color: #aaa; --red: #ed4245; --green: #3aa65d; --orange: #faa919; - --input-background: #40444b; --dark: #202225; + --light: #97989d; --medium: #2f3136; - --body: #37393f; } // Basics @@ -20,11 +18,23 @@ color: var(--green) !important; } +a, +a.go { + color: #01b0f5; +} + +// Selected navigation item +a.sel { + background-color: var(--nav-hover-background); + box-shadow: none; + color: white; +} + // Global body, html { - background-color: var(--body); + background-color: var(--medium); color: white; } @@ -34,11 +44,15 @@ body.fixed-header #header { } #system-info { - background-color: #2f3136; + background-color: var(--dark); } #global-sidebar { - background-color: #2f3136; + background-color: var(--dark); + + a { + color: var(--light); + } } #global-sidebar > a[href]:not(.sel):hover, @@ -52,7 +66,7 @@ body.fixed-header #header { #global-sidebar *:not(.has-subnav) > a[href]:hover, #global-sidebar *:not(.has-subnav) > a[href].active, #global-sidebar *:not(.has-subnav) > a[href]:active { - color: var(--nav-hover-color); + color: white; } #global-header { @@ -61,11 +75,9 @@ body.fixed-header #header { border-bottom: 1px solid var(--dark); } -// Selected navigation item -a.sel { - background-color: var(--nav-hover-background) !important; - box-shadow: none !important; - color: var(--nav-hover-color) !important; +#nav li:not(.has-subnav) > a.sel { + background-color: var(--nav-hover-background); + color: white; } .sidebar .heading span { @@ -73,25 +85,41 @@ a.sel { } .sidebar nav li a { - color: #97989d; + color: var(--light); } #sidebar nav li a:not(.sel):hover { background-color: var(--nav-hover-background); - color: var(--nav-hover-color); + color: white; +} + +#sidebar nav li a.sel { + background-color: var(--nav-hover-background); + color: white; + box-shadow: none; } // Content panes -.content-pane { - background-color: lighten(#37393f, 5%); + +.content-pane, +.pane-tabs ul li a.sel { + background-color: #42464d; box-shadow: none; + color: white; } -.pane .pane, -#content .pane { - background-color: var(--input-background); + +#content { + .pane-header { + background-color: #333; + } + .pane, + .message .body { + // Lighter than .content-pane + background-color: #5a5960; + } } .message .body { - background-color: var(--input-background); + background-color: var(--nav-hover-background); color: #ccc; } @@ -130,27 +158,48 @@ ul.icons li a .icon.icon-mask svg text { // Buttons .btn { - color: #babbbe; - background-color: #2f3136; + color: white; + background-color: #606e7b; + &:before, + &:after, &:hover { color: white; } } +.btn.dashed, +.copytextbtn { + border: 1px solid #666; + input, + span { + color: #999; + } +} + // Forms +#toolbar .btn, +#toolbar .text { + color: white; + border: 1px solid transparent; +} + .field > .heading > label, .field > .heading > legend { color: white; } -.notice { - color: #01b0f5 !important; +#content :not(.meta) > .flex-fields > :not(h2):not(hr):before, +#content :not(.meta) > .flex-fields > :not(h2):not(hr):last-child:before { + visibility: hidden; } -a, -a.go { - color: #01b0f5; +.field > .status-badge.outdated { + background-color: var(--orange); +} + +.notice { + color: #01b0f5 !important; } .selectize.select .selectize-control .selectize-input, @@ -171,7 +220,7 @@ a.go { .selectize-text > .selectize-control > .selectize-input, .selectize.multiselect .selectize-control.multi .selectize-input, .multiselect > select { - background-color: var(--input-background); + background-color: var(--nav-hover-background); color: white; } @@ -184,17 +233,17 @@ a.go { table.data thead th, table.data thead td { background-color: var(--nav-hover-background); - color: var(--nav-hover-color); + color: white; } table.data thead th.ordered, table.data thead th.orderable:not(.ordered):hover { - background-color: var(--dark); + background-color: var(--medium); } table.data tbody tr:not(.disabled):hover th, table.data tbody tr:not(.disabled):hover td { background-color: #38393f; - color: var(--nav-hover-color); + color: white; } #footer { @@ -221,9 +270,44 @@ hr { } #details .meta.read-only { - background-color: #2f3136; + background-color: var(--dark); } #details .meta:not(.read-only):not(.warning) { - background-color: var(--medium); + background-color: var(--dark); +} + +// Plugin store +.ps-wrapper .ps-sidebar { + background-color: var(--dark); +} +ul.categories li a { + color: var(--light); +} +.text-grey-darkest { + color: var(--light); +} + +// Matrix +.matrixblock { + background-color: #3b3a43; + + > .titlebar { + background-color: var(--medium); + } +} + +// Redactor +.redactor + .redactor-box:not(.redactor-box-fullscreen):not(.redactor-source-view) { + background-color: var(--nav-hover-background) !important; +} + +.redactor-box .redactor-styles { + color: #dcddde !important; +} + +.redactor-air a, +.redactor-toolbar a { + color: white !important; }