boilerplate
This commit is contained in:
François-Xavier Guillois
@@ -0,0 +1,21 @@
|
||||
// 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');
|
||||
|
||||
// Import utilities.
|
||||
@import 'utils/typography';
|
||||
@import 'utils/colors';
|
||||
@import 'utils/mixins';
|
||||
@import 'utils/variables';
|
||||
|
||||
/* Global styles */
|
||||
@import 'global/window';
|
||||
@import 'global/grid';
|
||||
@import 'global/flex';
|
||||
|
||||
/* Styles limited to totem sheets */
|
||||
.totem {
|
||||
@import 'components/forms';
|
||||
@import 'components/resource';
|
||||
@import 'components/items';
|
||||
@import 'components/effects';
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
.item-form {
|
||||
font-family: $font-primary;
|
||||
}
|
||||
|
||||
.sheet-header {
|
||||
flex: 0 auto;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.profile-img {
|
||||
flex: 0 0 100px;
|
||||
height: 100px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.header-fields {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
h1.charname {
|
||||
height: 50px;
|
||||
padding: 0px;
|
||||
margin: 5px 0;
|
||||
border-bottom: 0;
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
// 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;
|
||||
// font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------- */
|
||||
/* 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;
|
||||
}
|
||||
|
||||
// Item Name
|
||||
.item-name {
|
||||
flex: 2;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
h3, h4 {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Control Buttons
|
||||
.item-controls {
|
||||
display: flex;
|
||||
flex: 0 0 100px;
|
||||
justify-content: flex-end;
|
||||
a {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
// Individual Item
|
||||
.item {
|
||||
align-items: center;
|
||||
padding: 0 2px; // to align with the header border
|
||||
border-bottom: 1px solid $c-faint;
|
||||
&:last-child { border-bottom: none; }
|
||||
.item-name {
|
||||
color: $c-dark;
|
||||
.item-image {
|
||||
flex: 0 0 30px;
|
||||
height: 30px;
|
||||
background-size: 30px;
|
||||
border: none;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-prop {
|
||||
text-align: center;
|
||||
border-left: 1px solid #c9c7b8;
|
||||
border-right: 1px solid #c9c7b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
// 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: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.item-name {
|
||||
padding-left: 5px;
|
||||
text-align: left;
|
||||
// font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Example style for Totem (can be removed if not needed) */
|
||||
.item-formula {
|
||||
flex: 0 0 200px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.resource-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
// Flexbox.
|
||||
.flex-group-center,
|
||||
.flex-group-left,
|
||||
.flex-group-right {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flex-group-left {
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.flex-group-right {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.flexshrink {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flexlarge {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
// Alignment styles.
|
||||
.align-left {
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
// Grid.
|
||||
.grid,
|
||||
.grid-2col {
|
||||
display: grid;
|
||||
grid-column: span 2 / span 2;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
margin: 10px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.grid-3col {
|
||||
grid-column: span 3 / span 3;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-4col {
|
||||
grid-column: span 4 / span 4;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-5col {
|
||||
grid-column: span 5 / span 5;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-6col {
|
||||
grid-column: span 6 / span 6;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-7col {
|
||||
grid-column: span 7 / span 7;
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-8col {
|
||||
grid-column: span 8 / span 8;
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-9col {
|
||||
grid-column: span 9 / span 9;
|
||||
grid-template-columns: repeat(9, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-10col {
|
||||
grid-column: span 10 / span 10;
|
||||
grid-template-columns: repeat(10, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-11col {
|
||||
grid-column: span 11 / span 11;
|
||||
grid-template-columns: repeat(11, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-12col {
|
||||
grid-column: span 12 / span 12;
|
||||
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
// Grid offset.
|
||||
.grid-start-2 { grid-column-start: 2 }
|
||||
.grid-start-3 { grid-column-start: 3 }
|
||||
.grid-start-4 { grid-column-start: 4 }
|
||||
.grid-start-5 { grid-column-start: 5 }
|
||||
.grid-start-6 { grid-column-start: 6 }
|
||||
.grid-start-7 { grid-column-start: 7 }
|
||||
.grid-start-8 { grid-column-start: 8 }
|
||||
.grid-start-9 { grid-column-start: 9 }
|
||||
.grid-start-10 { grid-column-start: 10 }
|
||||
.grid-start-11 { grid-column-start: 11 }
|
||||
.grid-start-12 { grid-column-start: 12 }
|
||||
|
||||
.grid-span-2 { grid-column-end: span 2 }
|
||||
.grid-span-3 { grid-column-end: span 3 }
|
||||
.grid-span-4 { grid-column-end: span 4 }
|
||||
.grid-span-5 { grid-column-end: span 5 }
|
||||
.grid-span-6 { grid-column-end: span 6 }
|
||||
.grid-span-7 { grid-column-end: span 7 }
|
||||
.grid-span-8 { grid-column-end: span 8 }
|
||||
.grid-span-9 { grid-column-end: span 9 }
|
||||
.grid-span-10 { grid-column-end: span 10 }
|
||||
.grid-span-11 { grid-column-end: span 11 }
|
||||
.grid-span-12 { grid-column-end: span 12 }
|
||||
@@ -0,0 +1,12 @@
|
||||
.window-app {
|
||||
font-family: $font-primary;
|
||||
}
|
||||
|
||||
.rollable {
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #000;
|
||||
text-shadow: 0 0 10px red;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
$c-white: #fff;
|
||||
$c-black: #000;
|
||||
|
||||
$c-dark: #191813;
|
||||
$c-faint: #c9c7b8;
|
||||
$c-beige: #b5b3a4;
|
||||
$c-tan: #444;
|
||||
@@ -0,0 +1,16 @@
|
||||
@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;
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
$font-primary: 'Roboto', sans-serif;
|
||||
$font-secondary: 'Roboto', sans-serif;
|
||||
@@ -0,0 +1,5 @@
|
||||
$padding-sm: 5px;
|
||||
$padding-md: 10px;
|
||||
$padding-lg: 20px;
|
||||
|
||||
$border-groove: 2px groove #eeede0;
|
||||
Reference in New Issue
Block a user