|
|
@@ -5,182 +5,303 @@
|
|
|
@import "bootstrap/scss/bootstrap";
|
|
|
@import url("./helpers.scss");
|
|
|
@import url("./button-styles.scss");
|
|
|
+@import url("./colors.scss");
|
|
|
+// @import url("./responsiveness.scss");
|
|
|
|
|
|
:root {
|
|
|
- // shadows
|
|
|
- --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
|
|
|
- --shadow-hover: 0px 5px 10px 0px rgba(0, 0, 0, 0.7);
|
|
|
- --shadow: 4px 4px 10px 4px rgba(0, 0, 0, 0.2);
|
|
|
- --shadow-medium: 4px 4px 10px 6px rgba(0, 0, 0, 0.2);
|
|
|
- --shadow-large: 4px 4px 10px 8px rgba(0, 0, 0, 0.2);
|
|
|
-
|
|
|
- // OFFICIAL COLORS
|
|
|
-
|
|
|
- --primary-old: #d8ac96;
|
|
|
- --primary: #b0826b;
|
|
|
-
|
|
|
- // Buttons
|
|
|
- --accept: #84a36f;
|
|
|
- --accept-hover: #6f9158;
|
|
|
- --delete: #a45a52;
|
|
|
- --delete-hover: #8f4a42;
|
|
|
- --edit: #86a5b7;
|
|
|
- --edit-hover: #6f8e9f;
|
|
|
- --neutral: #b9835d;
|
|
|
- --neutral-hover: #a76b43;
|
|
|
- --tab: #c79980;
|
|
|
- --tab-active: #bc8567;
|
|
|
-
|
|
|
- // Spellcards
|
|
|
-
|
|
|
- --abjuration-background: #cab8de;
|
|
|
- --abjuration-border: 0 0 0 2px #171314, 0 0 0 5px #9586a5;
|
|
|
- --conjuration-background: #714c81;
|
|
|
- --conjuration-border: 0 0 0 2px #171314, 0 0 0 5px #744987;
|
|
|
- --divination-background: #f0e3ce;
|
|
|
- --divination-border: 0 0 0 2px #171314, 0 0 0 5px #ffffff;
|
|
|
- --enchantment-background: #629179;
|
|
|
- --enchantment-border: 0 0 0 2px #171314, 0 0 0 5px #26714a;
|
|
|
- --evocation-background: #a46a7d;
|
|
|
- --evocation-border: 0 0 0 2px #171314, 0 0 0 5px #863f57;
|
|
|
- --illusion-background: #69a;
|
|
|
- --illusion-border: 0 0 0 2px #171314, 0 0 0 5px #2d6475;
|
|
|
- --necromancy-background: #000000;
|
|
|
- --necromancy-border: 0 0 0 2px #171314, 0 0 0 5px #36353a;
|
|
|
- --transmutation-background: rgb(51, 52, 138);
|
|
|
- --transmutation-border: 0 0 0 2px #171314, 0 0 3px #8f088f, 0 0 6px #7f088f,
|
|
|
- 0 0 9px #69088f, 0 0 12px #3a088f, 0 0 15px #080a8f;
|
|
|
-
|
|
|
- // General
|
|
|
-
|
|
|
- --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
|
|
|
- --shadow-inverted: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
|
|
|
- --shadow-bottom: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
|
|
|
- --shadow-top: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
|
|
|
-
|
|
|
- --primary-color: #a9836f;
|
|
|
- --background-color: #fff2e9;
|
|
|
- --field-background-color: #efc8af;
|
|
|
- --border-color: #8d8c8c;
|
|
|
-
|
|
|
- --modal-background: antiquewhite;
|
|
|
- --header: #ffdec6;
|
|
|
- --text: #000000;
|
|
|
- --items: #fff2e9;
|
|
|
- --items-hover: #f7e3d7;
|
|
|
-
|
|
|
- --border: 1px solid var(--border-color);
|
|
|
-
|
|
|
- // Responsiveness
|
|
|
- .responsive-small {
|
|
|
- display: none;
|
|
|
+ @mixin width-large {
|
|
|
+ @media (width >= 1920px) {
|
|
|
+ @content;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .responsive-large {
|
|
|
- display: block;
|
|
|
+ @mixin width-medium {
|
|
|
+ @media (width >= 1707px) {
|
|
|
+ @content;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- @media (width < 1640px) {
|
|
|
- .responsive-large {
|
|
|
- display: none;
|
|
|
+ @mixin width-small {
|
|
|
+ @media (width >= 1494px) {
|
|
|
+ @content;
|
|
|
}
|
|
|
- .responsive-small {
|
|
|
- display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ @mixin width-xsmall {
|
|
|
+ @media (width < 1445px) {
|
|
|
+ @content;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // LISTS
|
|
|
+ @mixin height-large {
|
|
|
+ @media (height >= 1080px) {
|
|
|
+ @content;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .item-list {
|
|
|
- width: 100%;
|
|
|
- overflow: auto;
|
|
|
+ @mixin height-medium {
|
|
|
+ @media (height >= 1001px) {
|
|
|
+ @content;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .item {
|
|
|
- background-color: var(--items);
|
|
|
- box-sizing: border-box;
|
|
|
- border: var(--border);
|
|
|
- border-radius: 10px;
|
|
|
- box-shadow: var(--shadow);
|
|
|
- cursor: move;
|
|
|
- transition: background-color 0.2s ease-in-out;
|
|
|
- &:hover {
|
|
|
- background-color: var(--items-hover);
|
|
|
+ @mixin height-small {
|
|
|
+ @media (height >= 934px) {
|
|
|
+ @content;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .empty-list {
|
|
|
- text-align: center;
|
|
|
- margin-top: 2rem;
|
|
|
- font-size: 1.25rem;
|
|
|
- font-weight: 500;
|
|
|
+ @mixin height-xsmall {
|
|
|
+ @media (height < 934px) {
|
|
|
+ @content;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .footer {
|
|
|
- height: 5rem;
|
|
|
+ .h840 {
|
|
|
+ position: absolute;
|
|
|
+ border-top: 2px solid green;
|
|
|
+ top: 840px;
|
|
|
width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- border-radius: 0 0 10px 10px;
|
|
|
- box-shadow: var(--shadow-top);
|
|
|
+ z-index: 9999999;
|
|
|
+ }
|
|
|
+ .h864 {
|
|
|
+ position: absolute;
|
|
|
+ border-top: 2px solid black;
|
|
|
+ top: 864px;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 9999999;
|
|
|
+ &:before {
|
|
|
+ content: "864";
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- // DRAG AND DROP
|
|
|
-
|
|
|
- .cdk-drag-preview {
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 10px;
|
|
|
- background-color: var(--items-hover);
|
|
|
- box-shadow:
|
|
|
- 0 5px 5px -3px rgba(0, 0, 0, 0.2),
|
|
|
- 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
|
|
- 0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
|
|
+ .h910 {
|
|
|
+ position: absolute;
|
|
|
+ border-top: 2px solid green;
|
|
|
+ z-index: 9999999;
|
|
|
+ top: 910px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .h934 {
|
|
|
+ position: absolute;
|
|
|
+ border-top: 2px solid black;
|
|
|
+ top: 934px;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 9999999;
|
|
|
+ &:before {
|
|
|
+ content: "934";
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .cdk-drag-placeholder {
|
|
|
- opacity: 0;
|
|
|
+ .h977 {
|
|
|
+ position: absolute;
|
|
|
+ border-top: 2px solid green;
|
|
|
+ top: 977px;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 9999999;
|
|
|
+ }
|
|
|
+ .h1001 {
|
|
|
+ position: absolute;
|
|
|
+ border-top: 2px solid black;
|
|
|
+ top: 1001px;
|
|
|
+ z-index: 9999999;
|
|
|
+ width: 100%;
|
|
|
+ &:before {
|
|
|
+ content: "1001";
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .cdk-drag-animating {
|
|
|
- transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
|
+ .h1056 {
|
|
|
+ position: absolute;
|
|
|
+ border-top: 2px solid green;
|
|
|
+ top: 1056px;
|
|
|
+ z-index: 9999999;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .h1080 {
|
|
|
+ position: absolute;
|
|
|
+ border-top: 2px solid black;
|
|
|
+ top: 1080px;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 9999999;
|
|
|
+ &:before {
|
|
|
+ content: "1080";
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder) {
|
|
|
- transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
|
+ .w1470 {
|
|
|
+ position: absolute;
|
|
|
+ border-left: 2px solid green;
|
|
|
+ left: 1470px;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ z-index: 9999999;
|
|
|
}
|
|
|
|
|
|
- // GENERAL STYLES
|
|
|
+ .w1494 {
|
|
|
+ position: absolute;
|
|
|
+ border-left: 2px solid black;
|
|
|
+ left: 1494px;
|
|
|
+ top: 0;
|
|
|
+ z-index: 9999999;
|
|
|
+ height: 100%;
|
|
|
+ &:before {
|
|
|
+ content: "1494";
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- // Checkbox
|
|
|
+ .w1683 {
|
|
|
+ position: absolute;
|
|
|
+ border-left: 2px solid green;
|
|
|
+ left: 1683px;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 9999999;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
|
|
|
- input[type="checkbox"] {
|
|
|
- accent-color: var(--accept) !important;
|
|
|
+ .w1707 {
|
|
|
+ position: absolute;
|
|
|
+ border-left: 2px solid black;
|
|
|
+ left: 1707px;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ z-index: 9999999;
|
|
|
+ &:before {
|
|
|
+ content: "1705";
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- // Scrollbar
|
|
|
- ::-webkit-scrollbar {
|
|
|
- width: 0.5rem;
|
|
|
- margin: 0.125rem 0;
|
|
|
- height: 0.5rem;
|
|
|
+ .w1896 {
|
|
|
+ position: absolute;
|
|
|
+ border-left: 2px solid green;
|
|
|
+ left: 1896px;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 9999999;
|
|
|
+ top: 0;
|
|
|
}
|
|
|
|
|
|
- ::-webkit-scrollbar-track {
|
|
|
- background: #f1f1f1;
|
|
|
- border-radius: 10px;
|
|
|
+ .w1920 {
|
|
|
+ position: absolute;
|
|
|
+ border-left: 2px solid black;
|
|
|
+ left: 1920px;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 9999999;
|
|
|
+ top: 0;
|
|
|
+ &:before {
|
|
|
+ content: "1920";
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- ::-webkit-scrollbar-thumb {
|
|
|
- background: #888;
|
|
|
- border-radius: 10px;
|
|
|
+// Responsiveness
|
|
|
+.responsive-small {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.responsive-large {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+@media (width < 1640px) {
|
|
|
+ .responsive-large {
|
|
|
+ display: none;
|
|
|
}
|
|
|
+ .responsive-small {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// LISTS
|
|
|
+
|
|
|
+.item-list {
|
|
|
+ width: 100%;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
|
|
|
- ::-webkit-scrollbar-thumb:hover {
|
|
|
- background: #555;
|
|
|
- border-radius: 10px;
|
|
|
+.item {
|
|
|
+ background-color: var(--items);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: var(--border);
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ cursor: move;
|
|
|
+ transition: background-color 0.2s ease-in-out;
|
|
|
+ &:hover {
|
|
|
+ background-color: var(--items-hover);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.empty-list {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 2rem;
|
|
|
+ font-size: 1.25rem;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.footer {
|
|
|
+ height: 5rem;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 0 0 10px 10px;
|
|
|
+ box-shadow: var(--shadow-top);
|
|
|
+}
|
|
|
+
|
|
|
+// DRAG AND DROP
|
|
|
+
|
|
|
+.cdk-drag-preview {
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: var(--items-hover);
|
|
|
+ box-shadow:
|
|
|
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2),
|
|
|
+ 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
|
|
+ 0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
|
|
+}
|
|
|
+
|
|
|
+.cdk-drag-placeholder {
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.cdk-drag-animating {
|
|
|
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
|
+}
|
|
|
+
|
|
|
+.item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder) {
|
|
|
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
|
|
+}
|
|
|
+
|
|
|
+// GENERAL STYLES
|
|
|
+
|
|
|
+// Checkbox
|
|
|
+
|
|
|
+input[type="checkbox"] {
|
|
|
+ accent-color: var(--accept) !important;
|
|
|
+}
|
|
|
+
|
|
|
+// Scrollbar
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 0.5rem;
|
|
|
+ margin: 0.125rem 0;
|
|
|
+ height: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-track {
|
|
|
+ background: #f1f1f1;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ background: #888;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #555;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
.suffix {
|
|
|
text-align: right;
|
|
|
padding-right: 0.5rem;
|
Warafear