WinterMyst
@ -1,22 +0,0 @@
|
||||
.effects .item {
|
||||
.effect-source,
|
||||
.effect-duration,
|
||||
.effect-controls {
|
||||
text-align: center;
|
||||
border-left: 1px solid #c9c7b8;
|
||||
border-right: 1px solid #c9c7b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.effect-controls {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// _effects.scss
|
||||
.kids-on-brooms input:focus,
|
||||
.kids-on-brooms textarea:focus,
|
||||
.kids-on-brooms select:focus {
|
||||
outline: none;
|
||||
border-color: $focus-border-color;
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
.item-form {
|
||||
font-family: $font-primary;
|
||||
}
|
||||
|
||||
.sheet-header {
|
||||
@include flexbox(row, wrap, flex-start); // Use a mixin for flexbox
|
||||
flex: 0 auto;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.profile-img {
|
||||
flex: 0 0 100px;
|
||||
height: 100px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.header-fields {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
h1.charname {
|
||||
height: 50px;
|
||||
padding: 0;
|
||||
margin: 5px 0;
|
||||
border-bottom: 0;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.editor-border {
|
||||
border: 2px solid $primary-border-color; // Replace the hardcoded color with a variable
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.sheet-tabs {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.sheet-body,
|
||||
.sheet-body .tab,
|
||||
.sheet-body .tab .editor {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tox {
|
||||
.tox-editor-container {
|
||||
background: $c-white;
|
||||
}
|
||||
|
||||
.tox-edit-area {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Flexbox container for each row
|
||||
.selection-row {
|
||||
display: flex;
|
||||
justify-content: space-between; // Ensures label stays left and input moves to the right
|
||||
align-items: center; // Vertically center the label and input
|
||||
margin-bottom: 10px; // Optional: Add some space between rows
|
||||
}
|
||||
@ -1,124 +0,0 @@
|
||||
// Section Header
|
||||
.items-header {
|
||||
height: 28px;
|
||||
margin: 2px 0;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: $border-groove;
|
||||
font-weight: bold;
|
||||
|
||||
> * {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-weight: bold;
|
||||
padding-left: 5px;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
// Items Lists
|
||||
.items-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
color: $c-tan;
|
||||
|
||||
// Child lists
|
||||
.item-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Individual Item
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2px; // Align with the header border
|
||||
border-bottom: 1px solid $c-faint;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
// Item name and image
|
||||
.item-name {
|
||||
flex: 2;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
color: $c-dark;
|
||||
|
||||
h3, h4 {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.item-image {
|
||||
flex: 0 0 30px;
|
||||
height: 30px;
|
||||
background-size: 30px;
|
||||
border: none;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Control Buttons
|
||||
.item-controls {
|
||||
display: flex;
|
||||
flex: 0 0 100px;
|
||||
justify-content: flex-end;
|
||||
|
||||
a {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
// Item Properties (like stats or details)
|
||||
.item-prop {
|
||||
text-align: center;
|
||||
border-left: 1px solid $c-faint;
|
||||
border-right: 1px solid $c-faint;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Section Header inside Items List
|
||||
.items-list .items-header {
|
||||
height: 28px;
|
||||
margin: 2px 0;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border: $border-groove;
|
||||
font-weight: bold;
|
||||
|
||||
> * {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
padding-left: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Optional item formula block
|
||||
.item-formula {
|
||||
flex: 0 0 200px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
.resource-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
// _base.scss
|
||||
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
|
||||
|
||||
.window-app {
|
||||
font-family: $font-stack;
|
||||
}
|
||||
|
||||
.rollable {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #000;
|
||||
text-shadow: $hover-text-shadow;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
// Flexbox Utility Classes
|
||||
.flex-group-center {
|
||||
@include flexbox(center, center);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flex-group-left {
|
||||
@include flexbox(flex-start, center);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.flex-group-right {
|
||||
@include flexbox(flex-end, center);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.flexshrink {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flexlarge {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
// Alignment Utility Classes
|
||||
.align-left {
|
||||
@include flexbox(flex-start, center);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
@include flexbox(flex-end, center);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
@include flexbox(center, center);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Only apply the right alignment to specific inputs with this class
|
||||
.right-align-input {
|
||||
flex: 1;
|
||||
margin-left: auto; // Push the input to the far right
|
||||
max-width: 260px; // Optional: Control the width of the input field
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
// _grid.scss
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 10px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@for $i from 2 through 12 {
|
||||
// Create grid-start-* classes for offsets
|
||||
.grid-start-#{$i} {
|
||||
grid-column-start: #{$i};
|
||||
}
|
||||
|
||||
// Create grid-span-* classes for column spans
|
||||
.grid-span-#{$i} {
|
||||
grid-column-end: span #{$i};
|
||||
}
|
||||
|
||||
// Create grid-*col classes for grid columns
|
||||
.grid-#{$i}col {
|
||||
grid-column: span #{$i} / span #{$i};
|
||||
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
.window-app {
|
||||
font-family: $font-primary;
|
||||
}
|
||||
|
||||
.rollable {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #000;
|
||||
text-shadow: 0 0 10px rgb(146, 0, 225);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
// Add custom fonts by visiting and search https://fonts.google.com
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
|
||||
// This is the font used for the book, will not buy it but for refrence https://www.myfonts.com/collections/dreadful-font-aiyari?queryId=undefined&index=universal_search_data&objectIDs=5368854002
|
||||
// This is the font used for text https://www.myfonts.com/products/lapidary-333-lapidary-333-434881?queryId=undefined&index=universal_search_data&objectIDs=5468003002
|
||||
// Import utilities.
|
||||
@import 'utils/variables';
|
||||
@import 'utils/typography';
|
||||
@import 'utils/colors';
|
||||
@import 'utils/mixins';
|
||||
|
||||
/* Global styles */
|
||||
@import 'global/window';
|
||||
@import 'global/grid';
|
||||
@import 'global/flex';
|
||||
@import 'global/base';
|
||||
|
||||
/* Styles limited to kidsonbrooms sheets */
|
||||
.kids-on-brooms {
|
||||
@import 'components/forms';
|
||||
@import 'components/resource';
|
||||
@import 'components/items';
|
||||
@import 'components/effects';
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
$c-white: #fff;
|
||||
$c-black: #000;
|
||||
|
||||
$c-dark: #191813;
|
||||
$c-faint: #c9c7b8;
|
||||
$c-beige: #b5b3a4;
|
||||
$c-tan: #444;
|
||||
|
||||
$primary-border-color: rgb(81, 81, 81);
|
||||
|
||||
$focus-border-color: #8102dd;
|
||||
$hover-text-shadow: 0 0 10px rgb(179, 7, 217);
|
||||
$border-color: #ccc;
|
||||
@ -1,25 +0,0 @@
|
||||
@mixin element-invisible {
|
||||
position: absolute;
|
||||
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
clip: rect(0 0 0 0);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@mixin hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Update the mixin to accept 3 arguments: direction, wrap, and justify
|
||||
@mixin flexbox($direction, $wrap: nowrap, $justify: flex-start, $align: stretch) {
|
||||
display: flex;
|
||||
flex-direction: $direction;
|
||||
flex-wrap: $wrap;
|
||||
justify-content: $justify;
|
||||
align-items: $align;
|
||||
}
|
||||
@ -1,2 +0,0 @@
|
||||
$font-primary: 'Roboto', sans-serif;
|
||||
$font-secondary: 'Roboto', sans-serif;
|
||||
@ -1,10 +0,0 @@
|
||||
$padding-sm: 5px;
|
||||
$padding-md: 10px;
|
||||
$padding-lg: 20px;
|
||||
|
||||
$border-groove: 2px groove #eeede0;
|
||||
|
||||
$font-stack: "Roboto", sans-serif;
|
||||
$padding: 10px;
|
||||
$border-radius: 5px;
|
||||
$flex-align: center;
|
||||
Reference in New Issue
Block a user