Introduce new design for the whole website

Fixes #116
TomaszGasior · Jun 11, 2022 · f3afea2 · f3afea2
2 parents 2b7cf09 + 8479101
commit f3afea2
Show file tree

Hide file tree

Showing 129 changed files with 3,090 additions and 2,788 deletions.
diff --git a/assets/css/part/ckeditor.css → assets/css/_layout/ckeditor-overrides.css b/assets/css/part/ckeditor.css → assets/css/_layout/ckeditor-overrides.css
@@ -1,47 +1,59 @@
+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;
-    padding: 1px 0.7em 0 0;
+    padding: 1px 12px 0 0;
 }
 .cke_chrome .cke_wordcount span {
     cursor: default !important;
 }
 
 .cke_chrome .cke_wysiwyg_div p, .cke_chrome .cke_wysiwyg_div ul, .cke_chrome .cke_wysiwyg_div ol {
-    margin: 0.8em 0;
+    margin: 15px 0;
 }
 
 .cke_dialog_body {

diff --git a/assets/css/_layout/form-action-button.css b/assets/css/_layout/form-action-button.css
@@ -0,0 +1,42 @@
+.form-action-button {
+    margin-top: 10px;
+    position: sticky;
+    bottom: 0;
+    padding: 30px 0;
+
+    text-align: center;
+}
+.form-action-button::before, .form-action-button::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+
+    /* cover shadow from .ui-block */
+    width: 20px;
+}
+.form-action-button::before {
+    left: 0;
+    transform: translateX(-100%);
+}
+.form-action-button::after {
+    right: 0;
+    transform: translateX(100%);
+}
+.form-action-button, .form-action-button::before, .form-action-button::after {
+    /* keep color in sync with body background */
+    background: linear-gradient(rgba(255,255,255, 0), #f7f6f5 40%);
+}
+.form-action-button button {
+    margin: 0 auto;
+    padding-left: 30px;
+    padding-right: 30px;
+}
+
+@media (max-width: 767px)
+{
+    /* keep in sync with .site-width padding */
+    .form-action-button::before, .form-action-button::after {
+        width: 5vw;
+    }
+}
diff --git a/assets/css/_layout/form-layout.css b/assets/css/_layout/form-layout.css
@@ -0,0 +1,53 @@
+.form-item + .form-item,
+.form-columns + .form-columns,
+.form-item + .form-columns, .form-columns + .form-item,
+.form-item + .form-group, .form-group + .form-item {
+    margin-top: 20px;
+}
+
+.form-item label {
+    display: inline-block;
+    margin-bottom: 7px;
+}
+
+@media (min-width: 768px)
+{
+    .form-columns {
+        display: grid;
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+        grid-gap: 20px;
+    }
+
+    .form-columns .form-item + .form-item {
+        margin-top: 0;
+    }
+}
+
+.form-item-checkbox {
+    position: relative;
+
+    /* keep in sync with input/checkbox width */
+    padding-left: calc(19px + 10px);
+}
+.form-item-checkbox label {
+    display: inline;
+    margin-bottom: 0;
+}
+.form-item-checkbox input {
+    position: absolute;
+    left: 0;
+    top: 1px;
+}
+
+.form-error-message {
+    color: #ff0000;
+    margin: 7px 0 0;
+    font-weight: bold;
+}
+.form-help-message {
+    font-size: 0.9em;
+    font-style: italic;
+    margin: 7px 0 0;
+    opacity: 0.8;
+}
diff --git a/assets/css/_layout/form-widgets-extra.css b/assets/css/_layout/form-widgets-extra.css
@@ -0,0 +1,33 @@
+.form-widget-number-unit {
+    position: relative;
+}
+.form-widget-number-unit input {
+    /* keep in sync with input's padding right */
+    padding-right: calc(11px + 70px);
+}
+.form-widget-number-unit .unit-label {
+    position: absolute;
+
+    /* keep in sync with input's border width */
+    right: 1px;
+    top: 1px;
+    bottom: 1px;
+
+    /* keep in sync with input's border radius */
+    border-top-right-radius: 7px;
+    border-bottom-right-radius: 7px;
+
+    /* keep in sync with input's border color */
+    border-left: 1px solid #cacaca;
+
+    background: #f8f6f6;
+    width: 70px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.form-widget-number-unit input:disabled + .unit-label {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
diff --git a/assets/css/_layout/form-widgets.css b/assets/css/_layout/form-widgets.css
@@ -0,0 +1,140 @@
+input, textarea, select, button, a.button {
+    width: 100%;
+    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;
+
+    font: inherit;
+    color: inherit;
+    box-sizing: border-box;
+}
+input:focus, textarea:focus, select:focus, button:focus, a.button:focus {
+    outline: 2px solid rgb(240,127,31, 0.6);
+    border-color: #F07F1F;
+    background-color: #fff;
+
+    /* needed for WebKit/Blink */
+    outline-offset: 0px;
+}
+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;
+}
+input[type="number"] {
+    text-align: center;
+}
+@supports (-webkit-app-region: initial)
+{
+    input[type="search"]::-webkit-search-cancel-button {
+        /* remove "X" from search input in WebKit */
+        -webkit-appearance: none;
+    }
+    input::-webkit-calendar-picker-indicator {
+        /* remove ugly arrow in inputs with datalist attribute in WebKit */
+        display: none;
+    }
+}
+@supports (-webkit-nbsp-mode: initial)
+{
+    input[type="search"] {
+        /* make search input consistent in WebKit, not Blink */
+        -webkit-appearance: none;
+    }
+}
+
+select {
+    /* hide default select arrow */
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+
+    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;
+    background-size: 30px;
+}
+
+button, a.button {
+    display: inline-block;
+    width: auto;
+    padding-left: 20px;
+    padding-right: 20px;
+
+    background: #f8f8f8;
+    color: #ba5400;
+    font-weight: bold;
+    border-color: #ddd;
+    box-shadow: 0 0 2px rgba(0,0,0, 0.17);
+}
+button:hover:not(:disabled), a.button:hover {
+    background-color: #e9e9e9;
+}
+button:focus, a.button:focus {
+    background-color: #f8f8f8;
+}
+button:active, a.button:active {
+    opacity: 0.7;
+}
+button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+a.button {
+    text-align: center;
+    width: auto;
+    text-decoration: none;
+
+    margin: 0;
+}
+
+fieldset {
+    margin: 0;
+    padding: 0;
+    border: none;
+    padding: 0;
+}
+
+input[type="checkbox"], input[type="radio"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+
+    display: inline-block;
+    width: 19px;
+    height: 19px;
+    padding: 0;
+    margin: 0;
+    border-radius: 4px;
+
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 9px 9px;
+}
+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 {
+    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"]:focus-visible + label, input[type="radio"]:focus-visible + label {
+    /* keep in sync with *:focus-visible */
+    outline-offset: 3px;
+    outline: 2px solid rgb(240,127,31, 0.6);
+}