Update site general style: colors, shadows, forms

Issue #116
TomaszGasior · May 14, 2022 · 585c4b9 · 585c4b9
1 parent 45c646a
commit 585c4b9
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 131 deletions.
diff --git a/assets/css/common.css b/assets/css/common.css
@@ -29,7 +29,7 @@ body {
     font: 17px "LatoLatinWeb", "Liberation Sans", "Arial", sans-serif;
     color: #000;
     text-rendering: optimizeLegibility;
-    background: #F7FFF3;
+    background: #f7f6f5;
 
     cursor: default;
     overflow-y: scroll;
@@ -55,6 +55,10 @@ a:hover {
     color: #0084FF;
     outline: none;
 }
+a:focus-visible {
+    outline-offset: 3px;
+    outline: 2px solid rgb(240,127,31, 0.6);
+}
 a:active {
     color: #64BE00;
     outline: none;
@@ -382,20 +386,23 @@ a:active {
 /* form widgets */
 
 input, textarea, select, button, a.button {
-    font-size: 0.88em;
     width: 100%;
-    padding: 5px 11px;
-    background: #F3F3F3;
-    box-shadow: inset 2px 2px 2px #DEDEDE;
-    border: 1px solid #C2C2C2;
+    padding: 6px 11px;
+    background: #f9f9f9;
+    border: 1px solid #cacaca;
+    border-radius: 7px;
+
+    outline: 0 solid transparent;
+    transition: linear 0.1s background-color, linear 0.1s outline;
 
-    outline: none;
     font: inherit;
     color: inherit;
     box-sizing: border-box;
 }
 input:focus, textarea:focus, select:focus, button:focus, a.button:focus {
-    outline: 1px solid #F07F1F;
+    outline: 2px solid rgb(240,127,31, 0.6);
+    border-color: #F07F1F;
+    background-color: #fff;
 
     /* needed for WebKit/Blink */
     outline-offset: 0px;
@@ -404,6 +411,10 @@ input:disabled, textarea:disabled, select:disabled {
     opacity: 0.4;
     cursor: not-allowed;
 }
+input::placeholder, textarea::placeholder {
+    color: inherit;
+    opacity: 0.3;
+}
 textarea {
     resize: vertical;
     min-height: 130px;
@@ -438,35 +449,33 @@ select {
     -webkit-appearance: none;
     appearance: none;
 
-    background-image: url("data:image/svg+xml,%3Csvg height='16px' width='35px' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23999' points='23.303,-0.002 12.467,10.834 1.63,-0.002 -0.454,2.082 12.467,15.002 14.551,12.918 25.387,2.082'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg height='16px' width='45px' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23999' points='23.303,-0.002 12.467,10.834 1.63,-0.002 -0.454,2.082 12.467,15.002 14.551,12.918 25.387,2.082'/%3E%3C/svg%3E");
     background-position: center right;
     background-repeat: no-repeat;
-
-    /* needed for WebKit */
-    border-radius: 0;
-}
-@supports (-moz-user-select: none)
-{
-    /* smaller padding for Firefox */
-    select {
-        padding: 4px 7px;
-    }
+    background-size: 30px;
 }
 
 button, a.button {
-    max-width: 40%;
+    display: block;
     margin: 1em auto 0;
-    background: #F8FFDF;
-    color: #F07F1F;
+    width: auto;
+    padding-left: 1.2em;
+    padding-right: 1.2em;
+
+    background: #f8f8f8;
+    color: #D66200;
     font-weight: bold;
-    transition: linear 0.1s background-color;
-    border-color: #DDDDDD;
-    box-shadow: 0 0 2px rgba(0,0,0, 0.08);
-    display: block;
+    border-color: #ddd;
+    box-shadow: 0 0 2px rgba(0,0,0, 0.17);
+}
+button:hover:not(:disabled), a.button:hover {
+    background: #e9e9e9;
+}
+button:focus, a.button:focus {
+    background: #f8f8f8;
 }
-button:hover:not(:disabled), button:focus, a.button:hover, a.button:focus {
-    background: #F07F1F;
-    color: #F2FFC6;
+button:active, a.button:active {
+    opacity: 0.7;
 }
 button:disabled {
     opacity: 0.4;
@@ -483,82 +492,50 @@ a.button {
 }
 
 fieldset {
+    margin: 0;
     padding: 0;
     border: none;
     padding: 0.3em 0;
-
-    /* undo "magic" top margin from fieldset */
-    margin: -0.9em 0 0;
-}
-
-@media (max-width: 800px)
-{
-    button {
-        max-width: 70%;
-    }
 }
 
 
 /* form widgets — checkboxes + labels */
 
 input[type="checkbox"], input[type="radio"] {
-    width: auto;
-    padding: 0;
-    margin: 0;
-
-    /* hide real checkbox and keep it above fake checkbox */
-    position: absolute;
-    z-index: 2;
-    opacity: 0;
-}
-
-input[type="checkbox"] + label::before, input[type="radio"] + label::before {
-    content: " ";
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
 
     display: inline-block;
-    width: 17px;
-    height: 17px;
+    width: 19px;
+    height: 19px;
     padding: 0;
+    margin: 0 6px 0 0;
+    border-radius: 4px;
+    vertical-align: -3px;
 
-    position: absolute;
-    z-index: 1;
-    margin-top: 1px;
-
-    /* negative label's padding-left */
-    margin-left: calc(-1 * (17px + 0.7em));
-
-    /* copied from form widgets styles */
-    background: #F3F3F3;
-    box-shadow: inset 2px 2px 2px #DEDEDE;
-    border: 1px solid #C2C2C2;
-}
-input[type="radio"] + label::before {
-    border-radius: 10px;
-    -moz-outline-radius: 10px;
-}
-input[type="checkbox"]:focus + label::before, input[type="radio"]:focus + label::before {
-    /* copied from form widgets styles */
-    outline: 1px solid #F07F1F;
-}
-input[type="checkbox"]:checked + label::before, input[type="radio"]:checked + label::before {
     background-position: center;
     background-repeat: no-repeat;
     background-size: 9px 9px;
 }
-input[type="checkbox"]:checked + label::before {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 1.852 1.852'%3E%3Cpath fill='%23FF7500' d='M0 0h1.852v1.852H0z'/%3E%3C/svg%3E");
+input[type="radio"] {
+    border-radius: 10px;
+}
+input[type="checkbox"]:checked {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 1 1'%3E%3Crect fill='%23FF7500' rx='0.25' x='0' y='0' width='1' height='1'/%3E%3C/svg%3E");
 }
-input[type="radio"]:checked + label::before {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 1.852 1.852'%3E%3Ccircle fill='%23FF7500' cx='19.798' cy='24.486' r='.926' transform='translate%28-18.872 -23.56%29'/%3E%3C/svg%3E");
+input[type="radio"]:checked {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 1 1'%3E%3Crect fill='%23FF7500' rx='1' x='0' y='0' width='1' height='1'/%3E%3C/svg%3E");
 }
 
 input[type="checkbox"] + label, input[type="radio"] + label {
-    /* keep in sync with ::before's margin-left */
-    padding-left: calc(17px + 0.7em);
+    border-radius: 3px;
+    outline: 0 solid transparent;
+    transition: linear 0.1s outline;
 }
-input[type="checkbox"]:focus:not(:hover) + label, input[type="radio"]:focus:not(:hover) + label {
-    outline: 1px dotted #F6BD8D;
+input[type="checkbox"]:focus-visible + label, input[type="radio"]:focus-visible + label {
     outline-offset: 3px;
+    outline: 2px solid rgb(240,127,31, 0.6);
 }
 
 
@@ -578,14 +555,10 @@ input.color[style] {
     margin: 20px 0;
 }
 .form-item label {
-    display: block;
+    display: inline-block;
     margin-bottom: 7px;
 }
 
-.form-item-checkbox {
-    /* needed for inputs and fake checkboxes with position absolute */
-    position: relative;
-}
 .form-item-checkbox label {
     margin-bottom: 0;
 }
@@ -606,18 +579,30 @@ input.color[style] {
 /* radio tables list */
 
 .radio-tables-list-item {
-    background: #FAFFF8;
-    border: 1px solid #D2D2D2;
+    background: #fff;
+    border: 1px solid #dfdfdf;
+    border-radius: 7px;
+    box-shadow: 0 0 6px rgba(0,0,0, 0.09);
     padding: 1em 1.4em;
     margin: 1.2em 0;
+
+    outline: 0 solid transparent;
+    transition: linear 0.1s outline;
+}
+.radio-tables-list-item:hover {
+    background: #fcfcfc;
+    border-color: #e6d1be;
+}
+.radio-tables-list-item:focus-within {
+    outline: 2px solid rgb(240,127,31, 0.6);
+    border-color: #F07F1F;
 }
 .radio-tables-list-item dd {
     margin-left: 0;
 }
-
-.radio-tables-list-item:focus-within:not(:hover) {
-    background: rgba(255,255,255, 1);
-    border-color: #BABABA;
+.radio-tables-list-item a {
+    /* make outline visible with overflow */
+    outline-offset: -1px;
 }
 
 .radio-tables-list-title a, .radio-tables-list-details dl {
@@ -630,10 +615,6 @@ input.color[style] {
     display: block;
     font-size: 1.6em;
 }
-.radio-tables-list-title a:focus {
-    /* make outline visible with overflow */
-    outline-offset: -1px;
-}
 
 .radio-tables-list-details dl {
     margin: 0.4em 0 0.1em;
@@ -689,5 +670,4 @@ input.color[style] {
 .search-form button {
     margin: 0;
     margin-left: 0.6em;
-    width: 80px;
 }
diff --git a/assets/css/homepage.css b/assets/css/homepage.css
@@ -12,8 +12,10 @@
 }
 
 .homepage section {
-    background: rgba(255,255,255, 0.4);
-    box-shadow: 0 0 2px rgba(0,0,0, 0.15);
+    background: #fff;
+    border: 1px solid #dfdfdf;
+    border-radius: 7px;
+    box-shadow: 0 4px 22px rgba(0,0,0, 0.09);
     padding: 0.2em 1.3em 0.4em;
 }
 .homepage section h2 {

diff --git a/assets/css/part/ckeditor.css b/assets/css/part/ckeditor.css
@@ -1,36 +1,48 @@
+textarea.ckeditor {
+    height: 268px;
+}
+
 .cke_chrome {
+    border-radius: 7px !important;
+    border: 1px solid #cacaca !important;
+    background: #f7f7f7 !important;
+    outline: 0 solid transparent !important;
+    transition: linear 0.1s outline !important;
+
     box-shadow: none !important;
-    border: none !important;
 }
-.cke_chrome.cke_focus {
-    outline: 1px solid #F07F1F !important;
+.cke_chrome:focus-within {
+    outline: 2px solid rgb(240,127,31, 0.6) !important;
+    border-color: #F07F1F !important;
 }
 .cke_reset_all, .cke_reset_all *, .cke_reset_all a {
     font-family: inherit !important;
 }
 .cke_toolgroup {
-    background-image: linear-gradient(to bottom,#fff,#efefef) !important;
+    background: #fff !important;
+}
+.cke_toolgroup .cke_button:hover, .cke_toolgroup .cke_button:focus {
+    background: #eaeaea !important;
+}
+.cke_toolgroup .cke_button_on {
+    background: #cdcdcd !important;
+
+    box-shadow: none !important;
 }
 
 .cke_chrome .cke_inner {
-    background: rgba(224,224,224, 0.3) !important;
+    background: transparent !important;
 }
 .cke_chrome .cke_wysiwyg_div {
     padding: 2px 11px !important;
-    background: #F3F3F3 !important;
-    border: 1px solid #C2C2C2 !important;
-    box-shadow: inset 2px 2px 2px #DEDEDE !important;
+    background: #fff !important;
+    border-top: 1px solid #cacaca !important;
+    border-bottom: 1px solid #cacaca !important;
 }
 .cke_chrome span.cke_top, .cke_chrome span.cke_bottom {
     box-shadow: none !important;
-    border: 1px solid #C2C2C2 !important;
     background: none !important;
-}
-.cke_chrome span.cke_top {
-    border-bottom: none !important;
-}
-.cke_chrome span.cke_bottom {
-    border-top: none !important;
+    border: none !important;
 }
 .cke_chrome .cke_wordcount {
     text-transform: lowercase;

diff --git a/assets/css/radio-station-bulk-remove.css b/assets/css/radio-station-bulk-remove.css
@@ -4,9 +4,11 @@
     max-height: 430px;
     overflow-y: auto;
     box-sizing: border-box;
-    padding: 0.05em 1em;
-    background: #F9FCF9;
-    border: 1px solid #D6EAD0;
+    padding: 0 1.4em;
+    background: #fff;
+    border: 1px solid #dfdfdf;
+    border-radius: 7px;
+    box-shadow: 0 0 6px rgba(0,0,0, 0.09);
 }
 .radio-stations-remove fieldset {
     margin: 0;