summaryrefslogtreecommitdiff
path: root/webcards/styles
diff options
context:
space:
mode:
Diffstat (limited to 'webcards/styles')
-rw-r--r--webcards/styles/client/base.css104
-rw-r--r--webcards/styles/client/card.css116
-rw-r--r--webcards/styles/client/desktop.css10
-rw-r--r--webcards/styles/client/mobile.css2
-rw-r--r--webcards/styles/client/tablet.css4
-rw-r--r--webcards/styles/home/base.css8
-rw-r--r--webcards/styles/input.css296
7 files changed, 504 insertions, 36 deletions
diff --git a/webcards/styles/client/base.css b/webcards/styles/client/base.css
index cae61f6..fc8e310 100644
--- a/webcards/styles/client/base.css
+++ b/webcards/styles/client/base.css
@@ -13,7 +13,10 @@ html, body {
}
-.topbar {
+/* Topbar rules */
+
+.topbar
+{
position: fixed;
background-color: white;
@@ -29,66 +32,75 @@ html, body {
z-index: 1;
}
-.top-buttons {
+.top-buttons
+{
display: flex;
}
-button, input[type="button"] {
- display: inline-block;
- border: none;
- background-color: dodgerblue;
- padding: 10px;
- font-size: medium;
- border-radius: 5px;
- box-sizing: border-box;
-}
-
-button.top-button {
+button.top-button
+{
border-radius: 0;
background-color: white;
+ color: black;
flex: 1;
border-left: 1px solid black;
border-right: 1px solid black;
+
+ transition-duration: 0.2s;
}
-.top-buttons > button:first-child {
+button.top-button:hover {
+ background-color: #ddd;
+}
+
+.top-buttons > button:first-child
+{
border-left: none;
}
-.top-buttons > button:last-child {
+.top-buttons > button:last-child
+{
border-right: none;
}
-div.new-game {
+div.new-game
+{
flex: 1;
flex-grow: 1;
border-top: 2px solid black;
}
-div.mobile-settings {
+div.mobile-settings
+{
flex: 1;
flex-grow: 1;
border-top: 2px solid black;
}
-div.topbar > div.status {
+div.topbar > div.status
+{
height: 5px;
flex-basis: auto;
}
-div.stats {
+/* Content rules */
+
+div.stats
+{
padding: 5px;
display: flex;
flex-direction: column;
}
-div.stats > div {
+div.stats > div
+{
flex: 1;
display: flex;
}
-div.stats > div > span {
+div.stats > div > span
+{
flex-basis: content;
display: inline-block;
}
@@ -109,4 +121,52 @@ div.game {
div.game:last-child {
margin-bottom: none;
-} \ No newline at end of file
+}
+
+div.settings {
+ display:flex;
+ flex-direction: column;
+ padding: 5px;
+}
+
+/* Table rules */
+
+.table {
+ position: absolute;
+ z-index: 2;
+ width: 100vw;
+ height: 100vh;
+
+ animation-duration: 0.8s;
+
+ background-color: rgba(0, 0, 0, 0.5);
+}
+
+.table[state="open"] ,.table[state="close"]{
+ animation-name: slide-in;
+ animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
+ animation-iteration-count: 1;
+ animation-direction: normal;
+ animation-fill-mode: forwards;
+}
+
+.table[state="close"] {
+ animation-direction: reverse;
+}
+
+.table[state="closed"] {
+ transform: translate(0, -100vh);
+ opacity: 0;
+}
+
+@keyframes slide-in {
+ from {
+ transform: translate(0, -100vh);
+ opacity: 0;
+ }
+
+ to {
+ transform: translate(0, 0);
+ opacity: 1;
+ }
+}
diff --git a/webcards/styles/client/card.css b/webcards/styles/client/card.css
new file mode 100644
index 0000000..62b4054
--- /dev/null
+++ b/webcards/styles/client/card.css
@@ -0,0 +1,116 @@
+card
+{
+ position: absolute;
+ display: block;
+ width: 150px;
+ height: 225px;
+ background-color: white;
+ border: 6px double #bbb;
+ border-radius: 10px;
+ transition-duration: 0.2s;
+ cursor: pointer;
+ flex-direction: column;
+ overflow: hidden;
+ user-select: none;
+}
+
+card:hover
+{
+ box-shadow: 0 0 10px #0f0;
+}
+
+carea
+{
+ padding-left: 2px;
+ padding-right: 2px;
+ position: absolute;
+ display: flex;
+ vertical-align: middle;
+ width: 100%;
+}
+
+carea.top, carea.topl, carea.topr
+{
+ top: 0;
+ height: 8%;
+ text-align: center;
+}
+
+carea.topl
+{
+ width: 50%;
+ text-align: left;
+}
+
+carea.topr
+{
+ right: 0;
+ width: 50%;
+ text-align: right;
+}
+
+carea.mid
+{
+ top: 8%;
+ height: 84%;
+}
+
+carea.midt
+{
+ top: 8%;
+ height: 42%;
+}
+
+carea.midb
+{
+
+ top: 50%;
+ height: 42%;
+}
+
+carea.bot, carea.botl, carea.botr
+{
+ bottom: 0;
+ height: 8%;
+ text-align: center;
+}
+
+carea.botl
+{
+ width: 50%;
+ text-align: left;
+}
+
+carea.botr
+{
+ right: 0;
+ width: 50%;
+ text-align: right;
+}
+
+carea.all
+{
+ top: 0;
+ height: 100%;
+}
+
+ctext
+{
+ display: inline-block;
+ flex: 1;
+ font-size: small;
+ height: auto;
+}
+
+cimage
+{
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ flex: 1;
+}
+
+card[drag = "true"]
+{
+ z-index: 3;
+}
diff --git a/webcards/styles/client/desktop.css b/webcards/styles/client/desktop.css
index 46dc83d..08e24fe 100644
--- a/webcards/styles/client/desktop.css
+++ b/webcards/styles/client/desktop.css
@@ -10,14 +10,6 @@
TopBar rules
*/
- button.top-button {
- transition-duration: 0.2s;
- }
-
- button.top-button:hover {
- background-color: #ddd;
- }
-
button#newgame:before{
content: "Create Game";
}
@@ -101,7 +93,7 @@
padding: 10px;
border-radius: 10px;
background-color: #ddd;
- flex: 4;
+ flex: 2;
border: 5px solid #ddd;
}
diff --git a/webcards/styles/client/mobile.css b/webcards/styles/client/mobile.css
index cea233d..4659ce6 100644
--- a/webcards/styles/client/mobile.css
+++ b/webcards/styles/client/mobile.css
@@ -1,4 +1,4 @@
-@media (max-width: 599px), (max-height: 500px) {
+@media (max-width: 599px) or (max-height: 500px) {
/*
Hide stuff
*/
diff --git a/webcards/styles/client/tablet.css b/webcards/styles/client/tablet.css
index 37750f8..b9b5bd1 100644
--- a/webcards/styles/client/tablet.css
+++ b/webcards/styles/client/tablet.css
@@ -38,4 +38,8 @@
margin-top: 0px;
margin-left: 10px;
}
+
+ div.games {
+ flex: 4;
+ }
}
diff --git a/webcards/styles/home/base.css b/webcards/styles/home/base.css
index 2ef3693..99bb148 100644
--- a/webcards/styles/home/base.css
+++ b/webcards/styles/home/base.css
@@ -33,21 +33,21 @@ div.content {
align-items: center;
}
-a {
+a, button {
font-size: 24px;
display: block;
color: white;
+ box-sizing: border-box;
border-radius: 5px;
+ border: none;
padding: 5px;
- background-color: dodgerblue;
+ background-color: #0084ff;
transition-duration: 0.2s;
text-decoration: none;
margin-top: 10px;
-
- max-width: 100px;
} \ No newline at end of file
diff --git a/webcards/styles/input.css b/webcards/styles/input.css
new file mode 100644
index 0000000..16a5385
--- /dev/null
+++ b/webcards/styles/input.css
@@ -0,0 +1,296 @@
+/* Begin Input CSS */
+
+/* All input */
+
+input
+{
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+
+ margin: 5px;
+
+ display: block;
+ z-index: 1;
+}
+
+/* Button input */
+
+input[type=button], input[type=submit], button
+{
+ padding: 10px;
+ box-sizing: border-box;
+
+ border: none;
+ border-radius: 5px;
+
+ color: white;
+ background-color: #0084ff;
+
+ font-size: medium;
+
+ transition-duration: 0.2s;
+
+ cursor: pointer;
+}
+
+input[type=button]:hover, input[type=submit]:hover, button:hover
+{
+ background-color: #3ea2ff;
+}
+
+input[type=button]:active, input[type=submit]:active, button:active
+{
+ background-color: #0056a7;
+}
+
+/* Text, date, number, and time input */
+
+input[type=text], input[type=date], input[type=time], input[type="number"]
+{
+ border: 2px solid #555;
+ border-radius: 3px;
+ padding: 5px;
+ background-color: white;
+ font-size: 1em;
+}
+
+input[type=text]:hover, input[type=date]:hover, input[type=time]:hover, input[type="number"]:hover
+{
+ border-color: black;
+}
+
+input[type=text]:focus, input[type=date]:focus, input[type=time]:focus, input[type="number"]:focus
+{
+ border-color: #0084ff;
+}
+
+/* Radial input */
+
+input[type=radio]
+{
+ width: 20px;
+ height: 20px;
+
+ border: 3px solid black;
+ border-radius: 50%;
+
+ transition-duration: 0.2s;
+
+ background-color: white;
+
+ cursor: pointer;
+
+ display: inline-block;
+ vertical-align: middle;
+}
+
+input[type=radio]:checked, input[type=radio]:hover{
+ border-width: 6px;
+}
+
+input[type=radio]:checked
+{
+ background-color: black;
+ border-color: #0084ff;
+}
+
+input[type=radio]:hover
+{
+ border-color: #3ea2ff;
+}
+
+input[type=radio]:active
+{
+ border-color: black;
+}
+
+/* Checkbox input */
+
+input[type=checkbox]
+{
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+
+ display: inline-block;
+ vertical-align: middle;
+
+ width: 20px;
+ height: 20px;
+
+ border: 3px solid black;
+
+ border-radius: 2px;
+
+ transition-duration: 0.2s;
+
+ background-color: white;
+
+ cursor: pointer;
+}
+
+input[type=checkbox]:checked
+{
+ border-width: 10px;
+ border-color: #0084ff;
+}
+
+input[type=checkbox]:hover
+{
+ border-color: #3ea2ff;
+}
+
+input[type=checkbox]:active
+{
+ border-color: black;
+}
+
+input[type=checkbox]::after
+{
+ height: 16px;
+ width: 10px;
+
+ box-sizing: border-box;
+
+ position: relative;
+
+ display: block;
+
+ border-color: black;
+ border-style: solid;
+ border-width: 0px 0px 0px 0px;
+
+ top: calc(50% - 10px);
+ left: calc(50% - 5px);
+
+ transform-origin: center;
+ transform: rotate(45deg);
+
+ content: '';
+}
+
+input[type=checkbox]:checked::after
+{
+ border-width: 0px 3px 3px 0px;
+}
+
+/* Color input */
+
+input[type=color]
+{
+ display: inline-block;
+
+ vertical-align: middle;
+
+ height: 20px;
+ width: 20px;
+
+ margin: 0;
+ padding: 0;
+
+ border: 0;
+
+ cursor: pointer;
+}
+
+/* File input */
+
+input[type=file]
+{
+ display: none;
+}
+
+/* Input container */
+
+div.input-container {
+ margin: 5px;
+ padding: 5px;
+
+ border-radius: 3px;
+}
+
+/* Color container */
+
+div.input-container[type=color]
+{
+ text-align: center;
+
+ background-color: #0084ff;
+ color: white;
+
+ transition-duration: 0.2s;
+
+ cursor: pointer;
+
+ width: max-content;
+}
+
+div.input-container[type=color]::after
+{
+ display: inline;
+
+ vertical-align: middle;
+
+ content: ' Pick a color';
+}
+
+div.input-container[type=color]:hover
+{
+ background-color: #3ea2ff;
+}
+
+div.input-container[type=color]:active
+{
+ background-color: #0056a7;
+}
+
+/* File input container */
+
+div.input-container[type=file]
+{
+ background-color: #0084ff;
+ color: white;
+
+ transition-duration: 0.2s;
+
+ cursor: pointer;
+
+ text-align: center;
+
+ width: max-content;
+ height: max-content;
+}
+
+div.input-container[type=file]:hover
+{
+ background-color: #3ea2ff;
+}
+
+div.input-container[type=file]:active
+{
+ background-color: #0056a7;
+}
+
+div.input-container[type=file]::after
+{
+ display: inline;
+
+ vertical-align: middle;
+
+ content: attr(data-files);
+}
+
+/* Radio input container */
+
+div.input-container[type=radio]::before {
+ display: block;
+ content: 'Radio';
+}
+
+div.input-container[type=radio]
+{
+ background-color: rgba(255, 255, 255, 0.3);
+}
+
+/* End Input CSS */ \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-09-19 23:52:25 +0000