From a6e959b8ef3ae15a05973e716e54f98afa73778a Mon Sep 17 00:00:00 2001 From: Sky Johnson Date: Sat, 12 Oct 2024 18:39:28 -0500 Subject: [PATCH] Move CSS around, add render loop --- public/assets/css/dragon.css | 565 +------------------------- public/assets/css/src/buttons.css | 69 ++++ public/assets/css/{ => src}/forms.css | 0 public/assets/css/src/main.css | 450 ++++++++++++++++++++ public/assets/css/src/utilities.css | 40 ++ src/helpers.php | 8 +- templates/layouts/basic.php | 4 +- templates/pages/home.php | 4 +- templates/pages/world/base.php | 80 +++- 9 files changed, 629 insertions(+), 591 deletions(-) create mode 100644 public/assets/css/src/buttons.css rename public/assets/css/{ => src}/forms.css (100%) create mode 100644 public/assets/css/src/main.css create mode 100644 public/assets/css/src/utilities.css diff --git a/public/assets/css/dragon.css b/public/assets/css/dragon.css index 96893e9..cb7900f 100644 --- a/public/assets/css/dragon.css +++ b/public/assets/css/dragon.css @@ -1,564 +1 @@ -@import '/assets/css/forms.css'; - -:root { - font-size: 16px; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; -} - -html { - font-size: 16px; -} - -body { - background-color: #bcc6cf; - background-image: url('/assets/img/bg.jpg'); - background-attachment: fixed; - background-position: center top; - background-repeat: no-repeat; - max-width: 1920px; - margin: 0px auto; -} - -.ui.button { - cursor: pointer; - display: inline-block; - border: none; - font-size: 1rem; - background: #f7f8fa linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); - box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.3) inset, 0 0 0 1px #adb2bb inset; - color: #111111; - padding: 0.5rem 1rem 0.5rem; - text-align: center; - border-radius: 3px; - user-select: none; - -webkit-user-select: none; - text-decoration: none; - transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease; - -webkit-tap-highlight-color: transparent; - - &:hover { - background-color: #e0e0e0; - background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); - box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.3) inset, 0 0 0 1px #adb2bb inset; - color: rgba(0, 0, 0, 0.8); - } - - &.badge { - font-size: 10px; - padding: 0.1rem 0.25rem; - } - - &.primary { - background-color: #f4cc67; - background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); - box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; - color: #111111; - border: 1px solid; - border-color: #C59F43 #AA8326 #957321; - - &:hover { - background-color: #fac847; - border-color: #C59F43 #AA8326 #957321; - } - } - - &.secondary { - background-color: #444c55; - color: #ffffff; - background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); - border: 1px solid; - border-color: #3D444C #2F353B #2C3137; - box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; - - &:hover { - background-color: #4e5964; - border-color: #32373E #24282D #212429; - } - } - - &.danger { - background-color: #e57373; - background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(139, 0, 0, 0.1)); - box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; - border: 1px solid; - border-color: #d32f2f #c62828 #b71c1c; - - &:hover { - background-color: #d95c5c; - border-color: #b71c1c #a52727 #8e1f1f; - } - } -} - -header { - height: 76px; - color: white; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 1rem; - background-image: url('/assets/img/header.jpg'); - - h1 { - margin: 0; - padding: 0; - } - - .right { - display: flex; - align-items: center; - - p { - margin-right: 1rem; - } - } -} - -main { - padding: 1rem; - width: 100%; - display: flex; - gap: 2rem; - - #center { - flex: 1; - } -} - -aside { - min-width: 200px; - - .box { - background-color: rgba(0, 0, 0, 0.2); - border-radius: 0.15rem; - padding: 0.5rem; - } -} - -aside#left nav { - & > *:not(:last-child) { - margin-bottom: 0.25rem; - } - - div.stack { - background-color: rgba(0, 0, 0, 0.2); - border-radius: 0.15rem; - - input[type="checkbox"] { - display: none; - - &:checked ~ div.list { - display: block; - } - - &:checked + label { - background-color: rgba(0, 0, 0, 0.5); - color: white; - } - } - - label { - display: flex; - align-items: center; - padding: 0.5rem 1rem; - border-radius: 0.15rem; - text-decoration: none; - color: black; - transition: color, background-color 0.2s ease; - cursor: pointer; - - img { - height: 18px; - margin-right: 0.25rem; - } - - span.text { - display: block; - width: 100%; - } - - &:hover { - color: white; - background-color: rgba(0, 0, 0, 0.3); - } - - span.arrow { - position: relative; - top: 5px; - } - } - - div.list { - display: none; - - & > a { - display: block; - width: 100%; - padding: 0.5rem 1rem 0.5rem 1.35rem; - border-radius: 0.15rem; - text-decoration: none; - color: black; - transition: color, background-color 0.2s ease; - - &:not(:last-child)::before { - content: '├'; - display: inline-block; - margin-right: 0.25rem; - } - - &:last-child::before { - content: '└'; - display: inline-block; - position: relative; - top: 3px; - margin-right: 0.25rem; - } - - &:hover { - background-color: rgba(0, 0, 0, 0.3); - } - - &.active { - background-color: #444c55; - color: #ffffff; - background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); - border: 1px solid; - border-color: #3D444C #2F353B #2C3137; - box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; - } - } - } - } - - & > a { - display: block; - width: 100%; - padding: 0.5rem 1rem; - text-decoration: none; - color: black; - transition: color, background-color 0.2s ease; - background-color: rgba(0, 0, 0, 0.2); - border-radius: 0.15rem; - - &:has(img) { - display: flex; - align-items: center; - - img { - height: 18px; - margin-right: 0.25rem; - } - } - - &:hover, &.active { - color: white; - } - - &:hover { - background-color: rgba(0, 0, 0, 0.3); - } - - &.active { - background-color: #444c55; - color: #ffffff; - background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); - border: 1px solid; - border-color: #3D444C #2F353B #2C3137; - box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; - } - } -} - -footer { - display: flex; - justify-content: center; - align-items: center; - margin: 1rem 0; - padding: 1rem; - text-align: center; - color: #666; - - & > p:not(:last-child) { - margin-right: 2rem; - } -} - -#char-bar { - display: flex; - align-items: center; - justify-content: space-around; - padding: 0 1rem; - height: 34px; - color: white; - gap: 1rem; - background-image: url('/assets/img/bar.jpg'); - - & > div.container { - display: flex; - align-items: center; - gap: 1rem; - - & > div { - display: flex; - align-items: center; - - .icon { - width: 18px; - margin-right: 0.5rem; - } - } - } -} - -span.badge { - font-size: 10px; - background-color: #f7f8fa; - color: #111111; - border-radius: 0.25rem; - padding: 0.1rem 0.25rem; - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; - - &.dark { - background-color: #444c55; - color: white; - } - - &.green { - background-color: #a6e3a1; - } -} - -.my-1 { margin-bottom: 0.25rem; margin-top: 0.25rem; } -.my-2 { margin-bottom: 0.5rem; margin-top: 0.5rem; } -.my-3 { margin-bottom: 0.75rem; margin-top: 0.75rem; } -.my-4 { margin-bottom: 1rem; margin-top: 1rem; } - -.ml-1 { margin-left: 0.25rem; } -.ml-2 { margin-left: 0.5rem; } -.ml-3 { margin-left: 0.75rem; } -.ml-4 { margin-left: 1rem; } - -.mr-1 { margin-right: 0.25rem; } -.mr-2 { margin-right: 0.5rem; } -.mr-3 { margin-right: 0.75rem; } -.mr-4 { margin-right: 1rem; } - -.mb-1 { margin-bottom: 0.25rem; } -.mb-2 { margin-bottom: 0.5rem; } -.mb-3 { margin-bottom: 0.75rem; } -.mb-4 { margin-bottom: 1rem; } - -.mt-1 { margin-top: 0.25rem; } -.mt-2 { margin-top: 0.5rem; } -.mt-3 { margin-top: 0.75rem; } -.mt-4 { margin-top: 1rem; } - - -.container-960 { - width: 960px; - margin: 0 auto; -} - -.char-meter { - background-color: black; - height: 16px; - min-width: 100px; - border-radius: 0.1rem; - position: relative; - - & > div { - height: 100%; - border-radius: 0.1rem; - overflow: hidden; - - &.hp { - background-color: #e57373; - background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(139, 0, 0, 0.1)); - box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; - border: 1px solid; - border-color: #d32f2f #c62828 #b71c1c; - } - - &.mp { - background-color: #5a9bd4; - background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(60, 100, 150, 0.1)); - box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; - border: 1px solid; - border-color: #4a8ab0 #3a7a9c #2a6a88; - } - - &.tp { - background-color: #f4cc67; - background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); - box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; - border: 1px solid; - border-color: #C59F43 #AA8326 #957321; - } - } -} - -.tooltip { - background-color: black; - color: white; - border: 1px solid #666; - font-size: 14px; - padding: 0.5rem; - box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.2); - border-radius: 0.1rem; - text-align: center; -} - -.tooltip-trigger { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; -} - -.debug-query-log { - padding: 2rem; - font-size: 14px; - color: #666; - font-family: monospace; -} - -#center section { - &:not(:last-child) { - padding-bottom: 1rem; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - margin-bottom: 1rem; - } -} - -h1:has(.badge), h2:has(.badge), h3:has(.badge), h4:has(.badge), h5:has(.badge), h6:has(.badge) { - display: flex; - align-items: center; - - & > .badge { - margin-left: 0.5rem; - } -} - -.alert { - position: relative; - min-height: 1rem; - margin: 1rem 0; - background: #f8f8f9; - padding: 0.5rem 1rem; - line-height: 1.4285rem; - color: rgba(0, 0, 0, .87); - transition: opacity .1s ease, color .1s ease, background .1s ease, box-shadow .1s ease; - border-radius: .28571429rem; - box-shadow: 0 0 0 1px rgba(34, 36, 38, .22) inset, 0 0 0 0 transparent; - display: flex; - align-items: center; - justify-content: space-between; - - &.success { - background-color: #f0f9eb; - color: #2c662d; - border-color: #b3dc9d; - } - - &.danger { - background-color: #f9e9eb; - color: #9f3a38; - border-color: #e0b4b4; - } - - &.warning { - background-color: #fff8e1; - color: #573a08; - border-color: #f9e79f; - } - - &.info { - background-color: #f0f9fb; - color: #2c7fba; - border-color: #b3d7f9; - } - - &.dark { - background-color: #f0f0f0; - color: #2c2c2c; - border-color: #b3b3b3; - } - - a[alert-close] { - text-decoration: none; - cursor: pointer; - font-size: 2rem; - color: inherit; - } -} - -a { - color: #4C0515; - text-decoration: none; - transition: color 0.2s ease; - - &:hover { - color: #6C0515; - text-decoration: underline; - } -} - -body::-webkit-scrollbar { - width: 0.5rem; -} - -body::-webkit-scrollbar-track { - background: rgba(0, 0, 0, 0.1); -} - -body::-webkit-scrollbar-thumb { - background-color: #444c55; - background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); - border: 1px solid; - border-color: #3D444C #2F353B #2C3137; - box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; -} - -#canvas-container { - & > canvas { - display: block; - width: 100%; - height: 440px; - image-rendering: pixelated; - image-rendering: crisp-edges; - image-rendering: -webkit-optimize-contrast; - } -} - -.char-icon { - width: 32px; - height: 32px; - background-image: url('/assets/img/world/rogues.png'); - - &.index-0 { - background-position: 0 0; - } - - &.index-1 { - background-position: -32px 0; - } - - &.index-2 { - background-position: -64px 0; - } - - &.index-3 { - background-position: -96px 0; - } - - &.index-4 { - background-position: -128px 0; - } -} +:root{font-size:16px}*{box-sizing:border-box;margin:0;padding:0}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.container-960{width:960px;margin:0 auto}.ui.button{cursor:pointer;color:#111;text-align:center;user-select:none;-webkit-tap-highlight-color:transparent;background:#f7f8fa linear-gradient(#fff0,#0000001a);border:none;border-radius:3px;padding:.5rem 1rem;font-size:1rem;text-decoration:none;transition:opacity .1s,background-color .1s,color .1s,background .1s;display:inline-block;box-shadow:inset 0 1px 0 1px #ffffff4d,inset 0 0 0 1px #adb2bb;&:hover{color:#000c;background-color:#e0e0e0;background-image:linear-gradient(#fff0,#0000001a);box-shadow:inset 0 1px 0 1px #ffffff4d,inset 0 0 0 1px #adb2bb}&.badge{padding:.1rem .25rem;font-size:10px}&.primary{color:#111;background-color:#f4cc67;background-image:linear-gradient(#ffffff26,#0000001a);border:1px solid #aa8326;border-color:#c59f43 #aa8326 #957321;box-shadow:inset 0 1px #fff3;&:hover{background-color:#fac847;border-color:#c59f43 #aa8326 #957321}}&.secondary{color:#fff;background-color:#444c55;background-image:linear-gradient(#ffffff26,#0000001a);border:1px solid #2f353b;border-color:#3d444c #2f353b #2c3137;box-shadow:inset 0 1px #fff3;&:hover{background-color:#4e5964;border-color:#32373e #24282d #212429}}&.danger{background-color:#e57373;background-image:linear-gradient(#ffffff26,#8b00001a);border:1px solid #c62828;border-color:#d32f2f #c62828 #b71c1c;box-shadow:inset 0 1px #fff3;&:hover{background-color:#d95c5c;border-color:#b71c1c #a52727 #8e1f1f}}}.form.control{appearance:none;color:#fff;background-color:#0003;border:1px solid #0000;border-radius:4px;outline:none;width:100%;padding:.5rem;font-size:1rem;display:block;box-shadow:inset 0 1px 4px #0000001a;&::placeholder{color:#ffffffb3}&:hover{background-color:#0000004d}&:focus{background-color:#00000080;border-color:#000c}&.error{background-color:#ff2b2b33;&:hover{background-color:#ff2b2b4d}&:focus{background-color:#ff2b2b4d;border-color:#ff2b2bcc}}}.form.group{margin-bottom:1rem;&>label{margin-bottom:.5rem;display:block}&>.form.control:not(:last-child){margin-bottom:.5rem}}.character-select>.radio-block{background-color:#0003;border-radius:.15rem;display:inline-block;&:not(:last-child){margin-bottom:.25rem}&>input[type=radio]{display:none}&>label{cursor:pointer;background-image:linear-gradient(#fff0,#0000);border:1px solid #0000;border-radius:.15rem;align-items:center;width:100%;padding:.5rem;transition:color,background-color,border-color,background-image .2s;display:flex;&:hover{color:#fff;background-color:#0000004d}&>.badge{margin-left:.25rem}&>span.selected{display:none}&>.char-icon{margin-right:.25rem}}&.active>label{color:#fff;background-color:#444c55;background-image:linear-gradient(#ffffff26,#0000001a);border:1px solid #2f353b;border-color:#3d444c #2f353b #2c3137;box-shadow:inset 0 1px #fff3;&>span.selected{display:inline-block}}&>input[type=radio]:checked+label{color:#111;background-color:#f4cc67;background-image:linear-gradient(#ffffff26,#0000001a);border:1px solid #aa8326;border-color:#c59f43 #aa8326 #957321;box-shadow:inset 0 1px #fff3}&>input[type=radio]:disabled+label{cursor:default}}.character-select:not(:has(input[type=radio]:checked))>.buttons{display:none}body{background-color:#bcc6cf;background-image:url(/assets/img/bg.jpg);background-position:top;background-repeat:no-repeat;background-attachment:fixed;max-width:1640px;margin:0 auto;font-family:Cambria,Cochin,Georgia,Times,Times New Roman,serif}header{color:#fff;background-image:url(/assets/img/header.jpg);justify-content:space-between;align-items:center;height:76px;padding:0 1rem;display:flex;& h1{margin:0;padding:0}& .right{align-items:center;display:flex;& p{margin-right:1rem}}}main{gap:2rem;width:100%;padding:1rem;display:flex;& #center{flex:1}}aside{min-width:200px;& .box{background-color:#0003;border-radius:.15rem;padding:.5rem}}aside#left nav{&>:not(:last-child){margin-bottom:.25rem}& div.stack{background-color:#0003;border-radius:.15rem;& input[type=checkbox]{display:none;&:checked~div.list{display:block}&:checked+label{color:#fff;background-color:#00000080}}& label{color:#000;cursor:pointer;border-radius:.15rem;align-items:center;padding:.5rem 1rem;text-decoration:none;transition:color,background-color .2s;display:flex;& img{height:18px;margin-right:.25rem}& span.text{width:100%;display:block}&:hover{color:#fff;background-color:#0000004d}& span.arrow{position:relative;top:5px}}& div.list{display:none;&>a{color:#000;border-radius:.15rem;width:100%;padding:.5rem 1rem .5rem 1.35rem;text-decoration:none;transition:color,background-color .2s;display:block;&:not(:last-child):before{content:"├";margin-right:.25rem;display:inline-block}&:last-child:before{content:"└";margin-right:.25rem;display:inline-block;position:relative;top:3px}&:hover{background-color:#0000004d}&.active{color:#fff;background-color:#444c55;background-image:linear-gradient(#ffffff26,#0000001a);border:1px solid #2f353b;border-color:#3d444c #2f353b #2c3137;box-shadow:inset 0 1px #fff3}}}}&>a{color:#000;background-color:#0003;border-radius:.15rem;width:100%;padding:.5rem 1rem;text-decoration:none;transition:color,background-color .2s;display:block;&:has(img){align-items:center;display:flex;& img{height:18px;margin-right:.25rem}}&:hover,&.active{color:#fff}&:hover{background-color:#0000004d}&.active{color:#fff;background-color:#444c55;background-image:linear-gradient(#ffffff26,#0000001a);border:1px solid #2f353b;border-color:#3d444c #2f353b #2c3137;box-shadow:inset 0 1px #fff3}}}footer{text-align:center;color:#666;justify-content:center;align-items:center;margin:1rem 0;padding:1rem;display:flex;&>p:not(:last-child){margin-right:2rem}}#char-bar{color:#fff;background-image:url(/assets/img/bar.jpg);justify-content:space-around;align-items:center;gap:1rem;height:34px;padding:0 1rem;display:flex;&>div.container{align-items:center;gap:1rem;display:flex;&>div{align-items:center;display:flex;& .icon{width:18px;margin-right:.5rem}}}}span.badge{color:#111;background-color:#f7f8fa;border-radius:.25rem;padding:.1rem .25rem;font-size:10px;box-shadow:inset 0 0 0 1px #0000001a;&.dark{color:#fff;background-color:#444c55}&.green{background-color:#a6e3a1}}.char-meter{background-color:#000;border-radius:.1rem;min-width:100px;height:16px;position:relative;&>div{border-radius:.1rem;height:100%;overflow:hidden;&.hp{background-color:#e57373;background-image:linear-gradient(#ffffff26,#8b00001a);border:1px solid #c62828;border-color:#d32f2f #c62828 #b71c1c;box-shadow:inset 0 1px #fff3}&.mp{background-color:#5a9bd4;background-image:linear-gradient(#ffffff26,#3c64961a);border:1px solid #3a7a9c;border-color:#4a8ab0 #3a7a9c #2a6a88;box-shadow:inset 0 1px #fff3}&.tp{background-color:#f4cc67;background-image:linear-gradient(#ffffff26,#0000001a);border:1px solid #aa8326;border-color:#c59f43 #aa8326 #957321;box-shadow:inset 0 1px #fff3}}}.tooltip{color:#fff;text-align:center;background-color:#000;border:1px solid #666;border-radius:.1rem;padding:.5rem;font-size:14px;box-shadow:0 0 .5rem .1rem #0003}.tooltip-trigger{width:100%;height:100%;position:absolute;top:0;left:0}.debug-query-log{color:#666;padding:2rem;font-family:monospace;font-size:14px}#center section{&:not(:last-child){border-bottom:1px solid #0000001a;margin-bottom:1rem;padding-bottom:1rem}}h1:has(.badge),h2:has(.badge),h3:has(.badge),h4:has(.badge),h5:has(.badge),h6:has(.badge){align-items:center;display:flex;&>.badge{margin-left:.5rem}}.alert{color:#000000de;background:#f8f8f9;border-radius:.285714rem;justify-content:space-between;align-items:center;min-height:1rem;margin:1rem 0;padding:.5rem 1rem;line-height:1.4285rem;transition:opacity .1s,color .1s,background .1s,box-shadow .1s;display:flex;position:relative;box-shadow:inset 0 0 0 1px #22242638,0 0 #0000;&.success{color:#2c662d;background-color:#f0f9eb;border-color:#b3dc9d}&.danger{color:#9f3a38;background-color:#f9e9eb;border-color:#e0b4b4}&.warning{color:#573a08;background-color:#fff8e1;border-color:#f9e79f}&.info{color:#2c7fba;background-color:#f0f9fb;border-color:#b3d7f9}&.dark{color:#2c2c2c;background-color:#f0f0f0;border-color:#b3b3b3}& a[alert-close]{cursor:pointer;color:inherit;font-size:2rem;text-decoration:none}}a{color:#4c0515;text-decoration:none;transition:color .2s;&:hover{color:#6c0515;text-decoration:underline}}body::-webkit-scrollbar{width:.5rem}body::-webkit-scrollbar-track{background:#0000001a}body::-webkit-scrollbar-thumb{background-color:#444c55;background-image:linear-gradient(#ffffff26,#0000001a);border:1px solid #2f353b;border-color:#3d444c #2f353b #2c3137;box-shadow:inset 0 1px #fff3}#canvas-container{&>canvas{image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:-webkit-optimize-contrast;width:100%;height:440px;display:block}}.char-icon{background-image:url(/assets/img/world/rogues.png);width:32px;height:32px;&.index-0{background-position:0 0}&.index-1{background-position:-32px 0}&.index-2{background-position:-64px 0}&.index-3{background-position:-96px 0}&.index-4{background-position:-128px 0}} \ No newline at end of file diff --git a/public/assets/css/src/buttons.css b/public/assets/css/src/buttons.css new file mode 100644 index 0000000..deaf8df --- /dev/null +++ b/public/assets/css/src/buttons.css @@ -0,0 +1,69 @@ +.ui.button { + cursor: pointer; + display: inline-block; + border: none; + font-size: 1rem; + background: #f7f8fa linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); + box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.3) inset, 0 0 0 1px #adb2bb inset; + color: #111111; + padding: 0.5rem 1rem 0.5rem; + text-align: center; + border-radius: 3px; + user-select: none; + text-decoration: none; + transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease; + -webkit-tap-highlight-color: transparent; + + &:hover { + background-color: #e0e0e0; + background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1)); + box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.3) inset, 0 0 0 1px #adb2bb inset; + color: rgba(0, 0, 0, 0.8); + } + + &.badge { + font-size: 10px; + padding: 0.1rem 0.25rem; + } + + &.primary { + background-color: #f4cc67; + background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; + color: #111111; + border: 1px solid; + border-color: #C59F43 #AA8326 #957321; + + &:hover { + background-color: #fac847; + border-color: #C59F43 #AA8326 #957321; + } + } + + &.secondary { + background-color: #444c55; + color: #ffffff; + background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); + border: 1px solid; + border-color: #3D444C #2F353B #2C3137; + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; + + &:hover { + background-color: #4e5964; + border-color: #32373E #24282D #212429; + } + } + + &.danger { + background-color: #e57373; + background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(139, 0, 0, 0.1)); + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; + border: 1px solid; + border-color: #d32f2f #c62828 #b71c1c; + + &:hover { + background-color: #d95c5c; + border-color: #b71c1c #a52727 #8e1f1f; + } + } +} diff --git a/public/assets/css/forms.css b/public/assets/css/src/forms.css similarity index 100% rename from public/assets/css/forms.css rename to public/assets/css/src/forms.css diff --git a/public/assets/css/src/main.css b/public/assets/css/src/main.css new file mode 100644 index 0000000..b7635f9 --- /dev/null +++ b/public/assets/css/src/main.css @@ -0,0 +1,450 @@ +@import 'utilities.css'; +@import 'buttons.css'; +@import 'forms.css'; + +body { + background-color: #bcc6cf; + background-image: url('/assets/img/bg.jpg'); + background-attachment: fixed; + background-position: center top; + background-repeat: no-repeat; + max-width: 1640px; + margin: 0px auto; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; +} + +header { + height: 76px; + color: white; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 1rem; + background-image: url('/assets/img/header.jpg'); + + h1 { + margin: 0; + padding: 0; + } + + .right { + display: flex; + align-items: center; + + p { + margin-right: 1rem; + } + } +} + +main { + padding: 1rem; + width: 100%; + display: flex; + gap: 2rem; + + #center { + flex: 1; + } +} + +aside { + min-width: 200px; + + .box { + background-color: rgba(0, 0, 0, 0.2); + border-radius: 0.15rem; + padding: 0.5rem; + } +} + +aside#left nav { + & > *:not(:last-child) { + margin-bottom: 0.25rem; + } + + div.stack { + background-color: rgba(0, 0, 0, 0.2); + border-radius: 0.15rem; + + input[type="checkbox"] { + display: none; + + &:checked ~ div.list { + display: block; + } + + &:checked + label { + background-color: rgba(0, 0, 0, 0.5); + color: white; + } + } + + label { + display: flex; + align-items: center; + padding: 0.5rem 1rem; + border-radius: 0.15rem; + text-decoration: none; + color: black; + transition: color, background-color 0.2s ease; + cursor: pointer; + + img { + height: 18px; + margin-right: 0.25rem; + } + + span.text { + display: block; + width: 100%; + } + + &:hover { + color: white; + background-color: rgba(0, 0, 0, 0.3); + } + + span.arrow { + position: relative; + top: 5px; + } + } + + div.list { + display: none; + + & > a { + display: block; + width: 100%; + padding: 0.5rem 1rem 0.5rem 1.35rem; + border-radius: 0.15rem; + text-decoration: none; + color: black; + transition: color, background-color 0.2s ease; + + &:not(:last-child)::before { + content: '├'; + display: inline-block; + margin-right: 0.25rem; + } + + &:last-child::before { + content: '└'; + display: inline-block; + position: relative; + top: 3px; + margin-right: 0.25rem; + } + + &:hover { + background-color: rgba(0, 0, 0, 0.3); + } + + &.active { + background-color: #444c55; + color: #ffffff; + background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); + border: 1px solid; + border-color: #3D444C #2F353B #2C3137; + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; + } + } + } + } + + & > a { + display: block; + width: 100%; + padding: 0.5rem 1rem; + text-decoration: none; + color: black; + transition: color, background-color 0.2s ease; + background-color: rgba(0, 0, 0, 0.2); + border-radius: 0.15rem; + + &:has(img) { + display: flex; + align-items: center; + + img { + height: 18px; + margin-right: 0.25rem; + } + } + + &:hover, &.active { + color: white; + } + + &:hover { + background-color: rgba(0, 0, 0, 0.3); + } + + &.active { + background-color: #444c55; + color: #ffffff; + background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); + border: 1px solid; + border-color: #3D444C #2F353B #2C3137; + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; + } + } +} + +footer { + display: flex; + justify-content: center; + align-items: center; + margin: 1rem 0; + padding: 1rem; + text-align: center; + color: #666; + + & > p:not(:last-child) { + margin-right: 2rem; + } +} + +#char-bar { + display: flex; + align-items: center; + justify-content: space-around; + padding: 0 1rem; + height: 34px; + color: white; + gap: 1rem; + background-image: url('/assets/img/bar.jpg'); + + & > div.container { + display: flex; + align-items: center; + gap: 1rem; + + & > div { + display: flex; + align-items: center; + + .icon { + width: 18px; + margin-right: 0.5rem; + } + } + } +} + +span.badge { + font-size: 10px; + background-color: #f7f8fa; + color: #111111; + border-radius: 0.25rem; + padding: 0.1rem 0.25rem; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; + + &.dark { + background-color: #444c55; + color: white; + } + + &.green { + background-color: #a6e3a1; + } +} + +.char-meter { + background-color: black; + height: 16px; + min-width: 100px; + border-radius: 0.1rem; + position: relative; + + & > div { + height: 100%; + border-radius: 0.1rem; + overflow: hidden; + + &.hp { + background-color: #e57373; + background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(139, 0, 0, 0.1)); + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; + border: 1px solid; + border-color: #d32f2f #c62828 #b71c1c; + } + + &.mp { + background-color: #5a9bd4; + background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(60, 100, 150, 0.1)); + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; + border: 1px solid; + border-color: #4a8ab0 #3a7a9c #2a6a88; + } + + &.tp { + background-color: #f4cc67; + background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; + border: 1px solid; + border-color: #C59F43 #AA8326 #957321; + } + } +} + +.tooltip { + background-color: black; + color: white; + border: 1px solid #666; + font-size: 14px; + padding: 0.5rem; + box-shadow: 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.2); + border-radius: 0.1rem; + text-align: center; +} + +.tooltip-trigger { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} + +.debug-query-log { + padding: 2rem; + font-size: 14px; + color: #666; + font-family: monospace; +} + +#center section { + &:not(:last-child) { + padding-bottom: 1rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + margin-bottom: 1rem; + } +} + +h1:has(.badge), h2:has(.badge), h3:has(.badge), h4:has(.badge), h5:has(.badge), h6:has(.badge) { + display: flex; + align-items: center; + + & > .badge { + margin-left: 0.5rem; + } +} + +.alert { + position: relative; + min-height: 1rem; + margin: 1rem 0; + background: #f8f8f9; + padding: 0.5rem 1rem; + line-height: 1.4285rem; + color: rgba(0, 0, 0, .87); + transition: opacity .1s ease, color .1s ease, background .1s ease, box-shadow .1s ease; + border-radius: .28571429rem; + box-shadow: 0 0 0 1px rgba(34, 36, 38, .22) inset, 0 0 0 0 transparent; + display: flex; + align-items: center; + justify-content: space-between; + + &.success { + background-color: #f0f9eb; + color: #2c662d; + border-color: #b3dc9d; + } + + &.danger { + background-color: #f9e9eb; + color: #9f3a38; + border-color: #e0b4b4; + } + + &.warning { + background-color: #fff8e1; + color: #573a08; + border-color: #f9e79f; + } + + &.info { + background-color: #f0f9fb; + color: #2c7fba; + border-color: #b3d7f9; + } + + &.dark { + background-color: #f0f0f0; + color: #2c2c2c; + border-color: #b3b3b3; + } + + a[alert-close] { + text-decoration: none; + cursor: pointer; + font-size: 2rem; + color: inherit; + } +} + +a { + color: #4C0515; + text-decoration: none; + transition: color 0.2s ease; + + &:hover { + color: #6C0515; + text-decoration: underline; + } +} + +body::-webkit-scrollbar { + width: 0.5rem; +} + +body::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.1); +} + +body::-webkit-scrollbar-thumb { + background-color: #444c55; + background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); + border: 1px solid; + border-color: #3D444C #2F353B #2C3137; + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset; +} + +#canvas-container { + & > canvas { + display: block; + width: 100%; + height: 440px; + image-rendering: pixelated; + image-rendering: crisp-edges; + image-rendering: -webkit-optimize-contrast; + } +} + +.char-icon { + width: 32px; + height: 32px; + background-image: url('/assets/img/world/rogues.png'); + + &.index-0 { + background-position: 0 0; + } + + &.index-1 { + background-position: -32px 0; + } + + &.index-2 { + background-position: -64px 0; + } + + &.index-3 { + background-position: -96px 0; + } + + &.index-4 { + background-position: -128px 0; + } +} diff --git a/public/assets/css/src/utilities.css b/public/assets/css/src/utilities.css new file mode 100644 index 0000000..504cdf0 --- /dev/null +++ b/public/assets/css/src/utilities.css @@ -0,0 +1,40 @@ +:root { + font-size: 16px; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.my-1 { margin-bottom: 0.25rem; margin-top: 0.25rem; } +.my-2 { margin-bottom: 0.5rem; margin-top: 0.5rem; } +.my-3 { margin-bottom: 0.75rem; margin-top: 0.75rem; } +.my-4 { margin-bottom: 1rem; margin-top: 1rem; } + +.ml-1 { margin-left: 0.25rem; } +.ml-2 { margin-left: 0.5rem; } +.ml-3 { margin-left: 0.75rem; } +.ml-4 { margin-left: 1rem; } + +.mr-1 { margin-right: 0.25rem; } +.mr-2 { margin-right: 0.5rem; } +.mr-3 { margin-right: 0.75rem; } +.mr-4 { margin-right: 1rem; } + +.mb-1 { margin-bottom: 0.25rem; } +.mb-2 { margin-bottom: 0.5rem; } +.mb-3 { margin-bottom: 0.75rem; } +.mb-4 { margin-bottom: 1rem; } + +.mt-1 { margin-top: 0.25rem; } +.mt-2 { margin-top: 0.5rem; } +.mt-3 { margin-top: 0.75rem; } +.mt-4 { margin-top: 1rem; } + + +.container-960 { + width: 960px; + margin: 0 auto; +} diff --git a/src/helpers.php b/src/helpers.php index 93c6d90..d606cf8 100644 --- a/src/helpers.php +++ b/src/helpers.php @@ -104,11 +104,11 @@ function user($field = '') } /** - * Check whether the user has selected a character. If so, return the character's ID. + * Check whether the user has selected a character. */ -function user_selected_char(): int +function user_selected_char() { - return (int) $_SESSION['user']['char_id']; + return user('char_id') > 0 ? true : false; } /** @@ -124,7 +124,7 @@ function char($field = '') $GLOBALS['char'] = db_query( db_live(), "SELECT * FROM characters WHERE id = :c", - [':c' => user_selected_char()] + [':c' => user('char_id')] )->fetchArray(SQLITE3_ASSOC); } diff --git a/templates/layouts/basic.php b/templates/layouts/basic.php index 4e7a551..d8fac0f 100644 --- a/templates/layouts/basic.php +++ b/templates/layouts/basic.php @@ -28,7 +28,7 @@
@@ -36,7 +36,7 @@