Switches & Minor UI Improvements
This commit is contained in:
@@ -98,15 +98,15 @@ Statuses:
|
||||
|
||||
Complete the following:
|
||||
|
||||
- [ ] Draft a design for icons and avatars to look a little more "ornate", like literal signet rings, maybe with some subtle dark steel or faded gold bordering.
|
||||
- [x] Remove the lines on the left side of the categories page underneath the categories this also exists for subcategories on the "category" page.
|
||||
|
||||
## Future Tasks
|
||||
|
||||
Tasks to be considered in the future, not implemented immediately. Keep them in scope when making decisions.
|
||||
|
||||
- [ ] Consider a light mode/dark mode toggle while retaining core theme, preferably without adding a Skin
|
||||
- [x] Draft a design for icons and avatars to look a little more "ornate", like literal signet rings, maybe with some subtle dark steel or faded gold bordering. Implemented with layered dark steel/faded gold borders and restrained inset highlights for category icons, child category icons, avatars, and user initials. `./nodebb build` passes; local browser validation was blocked because `localhost:4567` was not running.
|
||||
|
||||
- [ ] Remove the lines on the left side of the categories page underneath the categories this also exists for subcategories on the "category" page.
|
||||
- [ ] Consider a light mode/dark mode toggle while retaining core theme, preferably without adding a Skin
|
||||
- [ ] Un-bold "topics" and "posts" and make the color lines replace the black line drived from category background color to either use the foreground color of the icon, or an ornate gilding like the icons (image 2)
|
||||
- [ ] Consider making the category names a bit smoother; it looks like it's not anti-aliased. (image 3)
|
||||
- [ ] Mobile website doesn't use the correct fonts.
|
||||
|
||||
@@ -8,18 +8,7 @@ ul.westgate-categories-list {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
padding-left: 0.9rem;
|
||||
}
|
||||
|
||||
ul.categories-list::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 1.1rem;
|
||||
bottom: 1.1rem;
|
||||
left: 0.45rem;
|
||||
width: 1px;
|
||||
background: linear-gradient(to bottom, rgba(194, 163, 90, 0.18), rgba(194, 163, 90, 0.04));
|
||||
pointer-events: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
li[component="categories/category"] {
|
||||
@@ -31,33 +20,25 @@ li[component="categories/category"] {
|
||||
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
li[component="categories/category"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 1.75rem;
|
||||
left: -0.9rem;
|
||||
width: 0.9rem;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, rgba(194, 163, 90, 0.2), rgba(194, 163, 90, 0.08));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
li[component="categories/category"].unread {
|
||||
border-color: rgba(194, 163, 90, 0.24) !important;
|
||||
}
|
||||
|
||||
li[component="categories/category"] .icon {
|
||||
border: 1px solid rgba(246, 223, 163, 0.24);
|
||||
border: 1px solid rgba(246, 223, 163, 0.34);
|
||||
border-radius: 6px !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--wg-etched-highlight),
|
||||
inset 0 -2px 5px rgba(0, 0, 0, 0.38),
|
||||
0 0 0 1px rgba(72, 48, 24, 0.42),
|
||||
0 8px 18px rgba(0, 0, 0, 0.28);
|
||||
filter: saturate(0.82) contrast(1.08);
|
||||
inset 0 1px 0 rgba(255, 242, 204, 0.28),
|
||||
inset 0 0 0 1px rgba(18, 15, 22, 0.62),
|
||||
inset 0 -3px 7px rgba(0, 0, 0, 0.52),
|
||||
0 0 0 1px rgba(56, 48, 42, 0.9),
|
||||
0 0 0 2px rgba(124, 105, 62, 0.24),
|
||||
0 9px 18px rgba(0, 0, 0, 0.32);
|
||||
filter: saturate(0.82) contrast(1.12);
|
||||
text-shadow:
|
||||
0 1px 0 rgba(0, 0, 0, 0.72),
|
||||
0 -1px 0 rgba(255, 238, 190, 0.16);
|
||||
0 -1px 0 rgba(255, 238, 190, 0.18),
|
||||
0 0 8px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
li[component="categories/category"] h2.title {
|
||||
@@ -116,14 +97,16 @@ ul.category-children {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(145deg, rgba(96, 65, 32, 0.54), rgba(36, 18, 29, 0.78));
|
||||
border: 1px solid rgba(246, 223, 163, 0.22);
|
||||
background: linear-gradient(145deg, rgba(105, 82, 45, 0.48), rgba(30, 28, 34, 0.62) 46%, rgba(36, 18, 29, 0.78));
|
||||
border: 1px solid rgba(246, 223, 163, 0.3);
|
||||
border-radius: 4px !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 240, 190, 0.26),
|
||||
inset 0 -1px 3px rgba(0, 0, 0, 0.42),
|
||||
0 0 0 1px rgba(27, 17, 18, 0.54);
|
||||
filter: saturate(0.78) contrast(1.08);
|
||||
inset 0 1px 0 rgba(255, 240, 190, 0.28),
|
||||
inset 0 0 0 1px rgba(17, 13, 18, 0.58),
|
||||
inset 0 -1px 3px rgba(0, 0, 0, 0.46),
|
||||
0 0 0 1px rgba(31, 25, 24, 0.72),
|
||||
0 0 0 2px rgba(124, 105, 62, 0.18);
|
||||
filter: saturate(0.8) contrast(1.12);
|
||||
font-size: 0.7rem !important;
|
||||
line-height: 18px !important;
|
||||
}
|
||||
@@ -180,5 +163,10 @@ li[component="categories/category"] .lastpost {
|
||||
}
|
||||
|
||||
li[component="categories/category"] .teaser .avatar {
|
||||
box-shadow: 0 0 0 1px rgba(194, 163, 90, 0.2);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 242, 204, 0.18),
|
||||
inset 0 0 0 1px rgba(18, 15, 22, 0.58),
|
||||
inset 0 -2px 5px rgba(0, 0, 0, 0.42),
|
||||
0 0 0 1px rgba(53, 46, 49, 0.88),
|
||||
0 0 0 2px rgba(124, 105, 62, 0.2) !important;
|
||||
}
|
||||
|
||||
@@ -69,6 +69,65 @@
|
||||
color: var(--wg-text) !important;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
padding-right: 2rem;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3e%3cpath d='M2 2.5 7 7.5l5-5' fill='none' stroke='%23c2a35a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
|
||||
background-position: right 0.65rem center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-size: 0.75rem 0.55rem !important;
|
||||
}
|
||||
|
||||
.form-control[type="number"],
|
||||
input[type="number"].form-control {
|
||||
appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
padding-right: 0.65rem;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
.form-control[type="number"]::-webkit-inner-spin-button,
|
||||
.form-control[type="number"]::-webkit-outer-spin-button,
|
||||
input[type="number"].form-control::-webkit-inner-spin-button,
|
||||
input[type="number"].form-control::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.form-switch .form-check-input,
|
||||
.form-check-input[role="switch"] {
|
||||
background-color: rgba(255, 244, 221, 0.08) !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23d8c28a'/%3e%3c/svg%3e") !important;
|
||||
border-color: rgba(216, 194, 138, 0.26) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 2px rgba(0, 0, 0, 0.48),
|
||||
0 0 0 1px rgba(8, 7, 10, 0.46) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-switch .form-check-input:hover,
|
||||
.form-check-input[role="switch"]:hover {
|
||||
background-color: rgba(255, 244, 221, 0.12) !important;
|
||||
border-color: rgba(216, 194, 138, 0.38) !important;
|
||||
}
|
||||
|
||||
.form-switch .form-check-input:checked,
|
||||
.form-check-input[role="switch"]:checked {
|
||||
background-color: var(--wg-gold) !important;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2309080b'/%3e%3c/svg%3e") !important;
|
||||
border-color: rgba(246, 223, 163, 0.58) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 244, 221, 0.2),
|
||||
0 0 0 1px rgba(66, 48, 16, 0.5) !important;
|
||||
}
|
||||
|
||||
.form-switch .form-check-input:focus,
|
||||
.form-check-input[role="switch"]:focus {
|
||||
border-color: rgba(216, 194, 138, 0.5) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 2px rgba(0, 0, 0, 0.42),
|
||||
0 0 0 1px rgba(194, 163, 90, 0.3) !important;
|
||||
}
|
||||
|
||||
.quick-reply .card,
|
||||
[component="topic/quickreply/container"] .card {
|
||||
box-shadow: var(--wg-ledger-shadow) !important;
|
||||
@@ -93,6 +152,13 @@
|
||||
color: var(--wg-text) !important;
|
||||
}
|
||||
|
||||
input[type="password"].form-control,
|
||||
.form-control[type="password"] {
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
||||
font-size: 1.05rem;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.form-control::placeholder,
|
||||
.bootstrap-tagsinput::placeholder,
|
||||
.composer textarea::placeholder,
|
||||
@@ -101,6 +167,49 @@ textarea[component="topic/quickreply/text"]::placeholder {
|
||||
color: rgba(185, 178, 166, 0.62) !important;
|
||||
}
|
||||
|
||||
table[component="notification/table"] {
|
||||
--bs-table-bg: transparent;
|
||||
--bs-table-color: var(--wg-text-soft);
|
||||
--bs-table-border-color: rgba(194, 163, 90, 0.1);
|
||||
--bs-table-hover-bg: rgba(194, 163, 90, 0.04);
|
||||
--bs-table-hover-color: var(--wg-text);
|
||||
color: var(--wg-text-soft) !important;
|
||||
}
|
||||
|
||||
table[component="notification/table"] :where(th, td, label) {
|
||||
color: var(--wg-text-soft) !important;
|
||||
}
|
||||
|
||||
table[component="notification/table"] thead :where(th, td) {
|
||||
color: var(--wg-ledger-ink-muted) !important;
|
||||
font-family: var(--wg-font-display);
|
||||
font-size: 0.86rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
table[component="notification/table"] tbody tr {
|
||||
border-color: rgba(194, 163, 90, 0.1) !important;
|
||||
}
|
||||
|
||||
table[component="notification/table"] a[data-type] {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 1.9rem;
|
||||
min-height: 1.9rem;
|
||||
border-radius: 999px;
|
||||
color: var(--wg-text-muted);
|
||||
text-decoration: none;
|
||||
transition: background-color 140ms ease, color 140ms ease;
|
||||
}
|
||||
|
||||
table[component="notification/table"] a[data-type]:hover,
|
||||
table[component="notification/table"] a[data-type]:focus {
|
||||
background-color: rgba(194, 163, 90, 0.075);
|
||||
color: var(--wg-text);
|
||||
}
|
||||
|
||||
.tool-modal {
|
||||
background: transparent !important;
|
||||
border-color: rgba(194, 163, 90, 0.16) !important;
|
||||
|
||||
@@ -8,20 +8,12 @@
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
ul.categories-list::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
li[component="categories/category"],
|
||||
li[component="category/topic"],
|
||||
li[component="post"] .post-container {
|
||||
padding: 0.85rem !important;
|
||||
}
|
||||
|
||||
li[component="categories/category"]::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
li[component="categories/category"] h2.title {
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
|
||||
@@ -145,22 +145,25 @@ samp,
|
||||
.user-icon,
|
||||
.avatar-tooltip .avatar,
|
||||
.avatar-tooltip img {
|
||||
border: 1px solid rgba(216, 194, 138, 0.2);
|
||||
border: 1px solid rgba(216, 194, 138, 0.32);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 238, 190, 0.18),
|
||||
inset 0 -2px 4px rgba(0, 0, 0, 0.44),
|
||||
0 0 0 1px rgba(24, 13, 19, 0.82),
|
||||
0 6px 14px rgba(0, 0, 0, 0.34) !important;
|
||||
filter: saturate(0.9) contrast(1.05);
|
||||
inset 0 1px 0 rgba(255, 242, 204, 0.2),
|
||||
inset 0 0 0 1px rgba(18, 15, 22, 0.58),
|
||||
inset 0 -3px 6px rgba(0, 0, 0, 0.48),
|
||||
0 0 0 1px rgba(53, 46, 49, 0.92),
|
||||
0 0 0 2px rgba(124, 105, 62, 0.22),
|
||||
0 7px 16px rgba(0, 0, 0, 0.36) !important;
|
||||
filter: saturate(0.88) contrast(1.08);
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
background-image:
|
||||
radial-gradient(circle at 34% 22%, rgba(255, 238, 190, 0.2), transparent 26%),
|
||||
linear-gradient(145deg, rgba(90, 58, 32, 0.42), rgba(44, 17, 34, 0.22)) !important;
|
||||
radial-gradient(circle at 34% 22%, rgba(255, 238, 190, 0.22), transparent 25%),
|
||||
linear-gradient(145deg, rgba(111, 86, 45, 0.36), rgba(30, 29, 34, 0.28) 42%, rgba(44, 17, 34, 0.2)) !important;
|
||||
text-shadow:
|
||||
0 1px 0 rgba(0, 0, 0, 0.78),
|
||||
0 -1px 0 rgba(255, 238, 190, 0.12);
|
||||
0 -1px 0 rgba(255, 238, 190, 0.16),
|
||||
0 0 8px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
li[component="post"] .avatar,
|
||||
|
||||
@@ -83,18 +83,6 @@ li[component="category/topic"]:not(.unread) .user-icon {
|
||||
opacity: 0.78;
|
||||
}
|
||||
|
||||
li[component="category/topic"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0.85rem;
|
||||
bottom: 0.85rem;
|
||||
left: 4.55rem;
|
||||
width: 1px;
|
||||
background: linear-gradient(to bottom, transparent, var(--wg-ledger-rule-strong), transparent);
|
||||
pointer-events: none;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
li[component="category/topic"]::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
@@ -192,6 +192,37 @@
|
||||
font-family: var(--wg-font-ui);
|
||||
}
|
||||
|
||||
[data-widget-area="footer"] > .row:has(> a.btn[href*="/user/"]) {
|
||||
--bs-gutter-x: 0.45rem;
|
||||
--bs-gutter-y: 0.45rem;
|
||||
width: 100%;
|
||||
margin: 0 0 0.85rem;
|
||||
padding: 0.6rem;
|
||||
background:
|
||||
linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(8, 7, 10, 0.08)),
|
||||
var(--wg-velvet-panel) !important;
|
||||
border: 1px solid rgba(194, 163, 90, 0.14);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--wg-velvet-shadow);
|
||||
}
|
||||
|
||||
[data-widget-area] :where(.row, .card-body):has(> a.btn[href*="/user/"]) > a.btn {
|
||||
background: transparent !important;
|
||||
background-image: none !important;
|
||||
border: 0 !important;
|
||||
box-shadow: none !important;
|
||||
color: var(--wg-text-soft) !important;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
[data-widget-area] :where(.row, .card-body):has(> a.btn[href*="/user/"]) > a.btn:hover,
|
||||
[data-widget-area] :where(.row, .card-body):has(> a.btn[href*="/user/"]) > a.btn:focus {
|
||||
background: rgba(194, 163, 90, 0.06) !important;
|
||||
background-image: none !important;
|
||||
color: var(--wg-text) !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[data-widget-area="sidebar"] .card,
|
||||
[data-widget-area="sidebar"] .alert,
|
||||
[data-widget-area="sidebar"] > :where(div, section, aside):not(:empty):not(.hidden):not(.row):not([data-widget-area]):not(.card):not(.alert):not(.list-group),
|
||||
|
||||
Reference in New Issue
Block a user