From 478ef78b76ff0c024147f371c986934252da2899 Mon Sep 17 00:00:00 2001 From: roberto Date: Sun, 17 Nov 2024 20:12:20 +0100 Subject: [PATCH] CSS reworking --- assets/static/css/main.css | 130 +++++++++++++++- assets/static/css/orig.css | 164 --------------------- assets/templates/base.tmpl | 2 +- assets/templates/categories/form.tmpl | 2 +- assets/templates/categories/list.tmpl | 2 +- assets/templates/items/add_relation.tmpl | 2 +- assets/templates/items/all_list.tmpl | 6 +- assets/templates/items/form.tmpl | 2 +- assets/templates/items/list.tmpl | 6 +- assets/templates/items/read.tmpl | 2 +- assets/templates/items/relations.tmpl | 2 +- assets/templates/items/relations_view.tmpl | 2 +- assets/templates/items/share.tmpl | 10 +- assets/templates/items/view.tmpl | 2 +- assets/templates/notebooks/form.tmpl | 6 +- assets/templates/notebooks/list.tmpl | 2 +- assets/templates/pages/login.tmpl | 8 +- assets/templates/quickbox/transform.tmpl | 14 +- assets/templates/types/field_new.tmpl | 16 +- assets/templates/types/fields.tmpl | 14 +- assets/templates/types/form.tmpl | 12 +- assets/templates/types/list.tmpl | 2 +- 22 files changed, 186 insertions(+), 222 deletions(-) diff --git a/assets/static/css/main.css b/assets/static/css/main.css index 2f35d3f..3ea432d 100644 --- a/assets/static/css/main.css +++ b/assets/static/css/main.css @@ -84,6 +84,101 @@ body { min-height: 100vh; } +.display-topleft { + position: absolute; + left: 0; + top: 0 +} + +.display-topright { + position: absolute; + right: 0; + top: 0 +} + +.display-bottomleft { + position: absolute; + left: 0; + bottom: 0 +} + +.display-bottomright { + position: absolute; + right: 0; + bottom: 0 +} + +.display-middle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%) +} + +.display-left { + position: absolute; + top: 50%; + left: 0%; + transform: translate(0%, -50%); + -ms-transform: translate(-0%, -50%) +} + +.display-right { + position: absolute; + top: 50%; + right: 0%; + transform: translate(0%, -50%); + -ms-transform: translate(0%, -50%) +} + +.display-topmiddle { + position: absolute; + left: 50%; + top: 0; + transform: translate(-50%, 0%); + -ms-transform: translate(-50%, 0%) +} + +.display-bottommiddle { + position: absolute; + left: 50%; + bottom: 0; + transform: translate(-50%, 0%); + -ms-transform: translate(-50%, 0%) +} + +.display-container:hover .display-hover { + display: block +} + +.display-container:hover span.display-hover { + display: inline-block +} + +.display-hover { + display: none +} + +.display-position { + position: absolute +} + +ul { + list-style-type: none; + padding: 0; + margin: 0 +} + +ul li { + padding: 8px 16px; + border-bottom: 1px solid #ddd +} + +ul li:last-child { + border-bottom: none +} + .row:after { content:""; display:table; @@ -147,6 +242,14 @@ fieldset { width: auto; } +input { + padding: 2px; + display: block; + border: none; + border-bottom: 1px solid #ccc; + width: 100% +} + input[type='checkbox'], input[type='radio'] { width: 18px; @@ -187,7 +290,7 @@ input[type='radio'] { } .hoverable tbody tr:hover, -.ul.w3-hoverable li:hover { +.ul.hoverable li:hover { background-color: #ccc } @@ -209,13 +312,38 @@ input[type='radio'] { padding-left: 16px } +.card { + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) +} + +.hover-shadow:hover { + box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19) +} + #page-main { transition: margin-left .4s; width: 100%; } +#form-login-container { + position: relative; +} + #form-login { width: 600px; + background-color: var(--primary-color); + color: #ffffff; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + border-radius: 4px; + padding: 12px 24px !important; +} + +#form-login input { + border: 1px solid #ccc !important } #main-sidebar { diff --git a/assets/static/css/orig.css b/assets/static/css/orig.css index c42cf0c..7a3237e 100644 --- a/assets/static/css/orig.css +++ b/assets/static/css/orig.css @@ -29,21 +29,6 @@ border-radius: 50% } -.w3-ul { - list-style-type: none; - padding: 0; - margin: 0 -} - -.w3-ul li { - padding: 8px 16px; - border-bottom: 1px solid #ddd -} - -.w3-ul li:last-child { - border-bottom: none -} - .w3-tooltip, .w3-display-container { position: relative @@ -65,65 +50,6 @@ transition: opacity 0s } -.w3-input { - padding: 2px; - display: block; - border: none; - border-bottom: 1px solid #ccc; - width: 100% -} - -.w3-select { - padding: 9px 0; - width: 100%; - border: none; - border-bottom: 1px solid #ccc -} - -.w3-dropdown-click, -.w3-dropdown-hover { - position: relative; - display: inline-block; - cursor: pointer -} - -.w3-dropdown-hover:hover .w3-dropdown-content { - display: block -} - -.w3-dropdown-hover:first-child, -.w3-dropdown-click:hover { - background-color: #ccc; - color: #000 -} - -.w3-dropdown-hover:hover>.w3-button:first-child, -.w3-dropdown-click:hover>.w3-button:first-child { - background-color: #ccc; - color: #000 -} - -.w3-dropdown-content { - cursor: auto; - color: #000; - background-color: #fff; - display: none; - position: absolute; - min-width: 160px; - margin: 0; - padding: 0; - z-index: 1 -} - -.w3-check, -.w3-radio { - width: 18px; - height: 18px; - position: relative; - top: 6px; - accent-color: #2b5797; -} - .w3-bar-block .w3-dropdown-hover, .w3-bar-block .w3-dropdown-click { width: 100% @@ -565,86 +491,6 @@ z-index: 4; } -.w3-display-topleft { - position: absolute; - left: 0; - top: 0 -} - -.w3-display-topright { - position: absolute; - right: 0; - top: 0 -} - -.w3-display-bottomleft { - position: absolute; - left: 0; - bottom: 0 -} - -.w3-display-bottomright { - position: absolute; - right: 0; - bottom: 0 -} - -.w3-display-middle { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%) -} - -.w3-display-left { - position: absolute; - top: 50%; - left: 0%; - transform: translate(0%, -50%); - -ms-transform: translate(-0%, -50%) -} - -.w3-display-right { - position: absolute; - top: 50%; - right: 0%; - transform: translate(0%, -50%); - -ms-transform: translate(0%, -50%) -} - -.w3-display-topmiddle { - position: absolute; - left: 50%; - top: 0; - transform: translate(-50%, 0%); - -ms-transform: translate(-50%, 0%) -} - -.w3-display-bottommiddle { - position: absolute; - left: 50%; - bottom: 0; - transform: translate(-50%, 0%); - -ms-transform: translate(-50%, 0%) -} - -.w3-display-container:hover .w3-display-hover { - display: block -} - -.w3-display-container:hover span.w3-display-hover { - display: inline-block -} - -.w3-display-hover { - display: none -} - -.w3-display-position { - position: absolute -} - .w3-circle { border-radius: 50% } @@ -690,16 +536,6 @@ margin-bottom: 4px } -.w3-card, -.w3-card-2 { - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) -} - -.w3-card-4, -.w3-hover-shadow:hover { - box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19) -} - .w3-spin { animation: w3-spin 2s infinite linear } diff --git a/assets/templates/base.tmpl b/assets/templates/base.tmpl index 9be16e5..787a00e 100644 --- a/assets/templates/base.tmpl +++ b/assets/templates/base.tmpl @@ -92,7 +92,7 @@
-
+
diff --git a/assets/templates/categories/form.tmpl b/assets/templates/categories/form.tmpl index 8850201..1a14c22 100644 --- a/assets/templates/categories/form.tmpl +++ b/assets/templates/categories/form.tmpl @@ -9,7 +9,7 @@ Name - {{ widget_relation_type $relation_name "Link" `id="$relation_name" class="w3-input w3-border"` }} + {{ widget_relation_type $relation_name "Link" `id="$relation_name" class=" w3-border"` }}
Title Category Tags - +

{{ end }}
diff --git a/assets/templates/items/list.tmpl b/assets/templates/items/list.tmpl index 8d2207a..6953706 100644 --- a/assets/templates/items/list.tmpl +++ b/assets/templates/items/list.tmpl @@ -16,7 +16,7 @@ Category Tags +
    {{ range .fields }}
  • {{.Title}} : {{ renderFieldValue .Value .Widget}}
    • {{ end }} diff --git a/assets/templates/items/relations.tmpl b/assets/templates/items/relations.tmpl index 914fd85..46ffcb4 100644 --- a/assets/templates/items/relations.tmpl +++ b/assets/templates/items/relations.tmpl @@ -59,7 +59,7 @@ {{ end }} {{ end }} - {{ widget_relation_type $relation_name $relation_type `id="$relation_name" class="w3-input w3-border"` }} + {{ widget_relation_type $relation_name $relation_type `id="$relation_name" class=" w3-border"` }}