forked from GitHub-Mirrors/foundry-sw5e
more ui elements updated.
This commit is contained in:
Nathanael Phillips
parent
b75aafd3ce
commit
e7ec90c944
16 changed files with 688 additions and 9 deletions
|
|
@ -37,9 +37,13 @@
|
|||
@tableRowHoverBackground: lighten(@colorLightGray, 10);
|
||||
@tableRowBorderColor: @colorLightGray;
|
||||
|
||||
//universalColors
|
||||
@windowHeaderBackground: @colorDarkBg;
|
||||
@windowHeaderLinkColor: @colorRed;
|
||||
|
||||
//Sidebar
|
||||
@sidebarTabBackground: @colorDarkBg;
|
||||
@sidebarTabLinkColor: @colorRed;
|
||||
@sidebarTabBackground: @windowHeaderBackground;
|
||||
@sidebarTabLinkColor: @windowHeaderLinkColor;
|
||||
@sidebarTabLinkUnderline: @colorRed;
|
||||
|
||||
@chatBackground: @colorDarkGray;
|
||||
|
|
@ -92,4 +96,18 @@
|
|||
@playlistSoundColor: @colorBlack;
|
||||
|
||||
@compendiumEntityBackground: @colorDarkBg;
|
||||
@compendiumStatusIcon: @colorLightGray;
|
||||
@compendiumStatusIcon: @colorLightGray;
|
||||
|
||||
@foundryNavBgColor: rgba(@colorLightBlue, 0.4);
|
||||
@foundryNavTextColor: white;
|
||||
@foundryNavBorderColor: @colorBlue;
|
||||
@foundryNavBgColorGM: @colorBlue;
|
||||
@foundryNavBorderColorGM: @colorPaleBlue;
|
||||
@foundryNavSceneLinkColor: white;
|
||||
@foundryNavActiveBgColor: rgba(@colorRed, 0.6);
|
||||
@foundryNavActiveBorderColor: lighten(@colorRed, 20);
|
||||
@foundryNavActiveGlow: darken(@colorRed, 20);
|
||||
@foundryNavContextShadow: darken(@colorBlue, 20);
|
||||
@foundryNavContextBorderColor: @colorBlue;
|
||||
|
||||
@foundryPlayersArrowColor: @colorLightGray;
|
||||
|
|
@ -34,10 +34,13 @@
|
|||
@tableRowHoverBackground: lighten(@colorPaleGray, 10);
|
||||
@tableRowBorderColor: @colorPaleGray;
|
||||
|
||||
//universalColors
|
||||
@windowHeaderBackground: white;
|
||||
@windowHeaderLinkColor: @colorRed;
|
||||
|
||||
//Sidebar
|
||||
@sidebarTabBackground: white;
|
||||
@sidebarTabLinkColor: @colorRed;
|
||||
@sidebarTabBackground: @windowHeaderBackground;
|
||||
@sidebarTabLinkColor: @windowHeaderLinkColor;
|
||||
@sidebarTabLinkUnderline: @colorRed;
|
||||
|
||||
@chatBackground: white;
|
||||
|
|
@ -90,4 +93,18 @@
|
|||
@playlistSoundColor: @colorBlack;
|
||||
|
||||
@compendiumEntityBackground: white;
|
||||
@compendiumStatusIcon: @colorLightGray;
|
||||
@compendiumStatusIcon: @colorLightGray;
|
||||
|
||||
@foundryNavBgColor: rgba(@colorLightBlue, 0.4);
|
||||
@foundryNavTextColor: white;
|
||||
@foundryNavBorderColor: @colorBlue;
|
||||
@foundryNavBgColorGM: @colorBlue;
|
||||
@foundryNavBorderColorGM: @colorPaleBlue;
|
||||
@foundryNavSceneLinkColor: white;
|
||||
@foundryNavActiveBgColor: rgba(@colorRed, 0.6);
|
||||
@foundryNavActiveBorderColor: lighten(@colorRed, 20);
|
||||
@foundryNavActiveGlow: darken(@colorRed, 20);
|
||||
@foundryNavContextShadow: darken(@colorBlue, 20);
|
||||
@foundryNavContextBorderColor: @colorBlue;
|
||||
|
||||
@foundryPlayersArrowColor: @colorLightGray;
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
font-family: 'Russo One';
|
||||
font-size: @size;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.openSans(@size: 13px, @weight: 400) {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,14 @@ input[type="text"], input[type="number"], input[type="password"], input[type="da
|
|||
&:focus {
|
||||
border-color: @inputBorderFocus;
|
||||
}
|
||||
&::placeholder {
|
||||
color: @inputTextColor;
|
||||
opacity: 0.5;
|
||||
}
|
||||
::-ms-input-placeholder { /* Microsoft Edge */
|
||||
color: @inputTextColor;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
button, input[type="button"], input[type="submit"], input[type="reset"] {
|
||||
|
|
@ -33,4 +41,13 @@ input[type="reset"], button.secondary, button[type="reset"], input[type="button"
|
|||
background: @buttonSecondaryBackground;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
button {
|
||||
border: none;
|
||||
}
|
||||
.notes, .hint {
|
||||
color: rgba(@bodyFontColor, 0.8);
|
||||
}
|
||||
}
|
||||
42
less/update/components/foundry-app-window-themes.less
Normal file
42
less/update/components/foundry-app-window-themes.less
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
.window-app {
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
.dropShadow2();
|
||||
header {
|
||||
background: @windowHeaderBackground;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border: none;
|
||||
.dropShadow1();
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.window-content {
|
||||
background: @primaryBackground;
|
||||
color: @bodyFontColor;
|
||||
footer {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#client-settings {
|
||||
nav.tabs {
|
||||
border: none;
|
||||
font-size: 17px;
|
||||
line-height: 1.6;
|
||||
a.item {
|
||||
border-bottom: 3px solid transparent;
|
||||
color: @bodyFontColor;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&.active {
|
||||
text-shadow: none;
|
||||
border-bottom-color: @sidebarTabLinkUnderline;
|
||||
}
|
||||
}
|
||||
}
|
||||
section.content {
|
||||
border: none;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
82
less/update/components/foundry-nav-themes.less
Normal file
82
less/update/components/foundry-nav-themes.less
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
#navigation {
|
||||
#nav-toggle {
|
||||
background: @foundryNavBgColor;
|
||||
color: @foundryNavTextColor;
|
||||
.nav-item {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
border: 1px solid @foundryNavBorderColor;
|
||||
}
|
||||
#scene-list {
|
||||
.scene {
|
||||
border: 1px solid @foundryNavBorderColor;
|
||||
background: rgba(@foundryNavBgColor, 0.4);
|
||||
a {
|
||||
color: @foundryNavSceneLinkColor;
|
||||
}
|
||||
&.gm {
|
||||
border: 1px solid @foundryNavBorderColorGM;
|
||||
background: rgba(@foundryNavBgColorGM, 0.4);
|
||||
}
|
||||
&.view, &.context {
|
||||
box-shadow: 0 0 8px @foundryNavContextShadow;
|
||||
border-color: @foundryNavContextBorderColor;
|
||||
}
|
||||
&.active {
|
||||
border-color: @foundryNavActiveBorderColor;
|
||||
background: @foundryNavActiveBgColor;
|
||||
box-shadow: 0 0 8px @foundryNavActiveGlow;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#controls {
|
||||
.scene-control, .control-tool {
|
||||
background: @foundryNavBgColor;
|
||||
color: @foundryNavTextColor;
|
||||
border: 1px solid @foundryNavBorderColor;
|
||||
box-shadow: none;
|
||||
&:hover {
|
||||
box-shadow: 0 0 8px @foundryNavContextShadow;
|
||||
}
|
||||
&.active {
|
||||
border-color: @foundryNavActiveBorderColor;
|
||||
background: @foundryNavActiveBgColor;
|
||||
box-shadow: 0 0 8px @foundryNavActiveGlow;
|
||||
}
|
||||
}
|
||||
}
|
||||
#players {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
h3 {
|
||||
background: @sidebarTabBackground;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
font-size: 17px;
|
||||
.dropShadow1();
|
||||
border-radius: 4px 4px 0 0;
|
||||
.players-mode {
|
||||
color: @foundryPlayersArrowColor;
|
||||
}
|
||||
}
|
||||
ol {
|
||||
margin: 4px 0;
|
||||
.player-name.self {
|
||||
color: inherit;
|
||||
font-weight: 700;
|
||||
}
|
||||
.player {
|
||||
color: @bodyFontColor;
|
||||
}
|
||||
.player-active {
|
||||
margin-top: 7px;
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -41,4 +41,6 @@ body.dark-theme {
|
|||
}
|
||||
@import "components/forms-themes.less";
|
||||
@import "components/sidebar-themes.less";
|
||||
@import "components/foundry-nav-themes.less";
|
||||
@import "components/foundry-app-window-themes.less";
|
||||
}
|
||||
|
|
@ -42,6 +42,12 @@
|
|||
font-weight: 700;
|
||||
src: url('./fonts/RussoOne.ttf');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Aurebesh';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('./fonts/Aurebesh.ttf');
|
||||
}
|
||||
@import "_variables.less";
|
||||
|
||||
html {
|
||||
|
|
@ -101,8 +107,77 @@ a {
|
|||
border: none;// 1px solid @colorBlue;
|
||||
.dropShadow1();
|
||||
}
|
||||
#pause h3 {
|
||||
border-bottom: 0;
|
||||
#pause {
|
||||
img {display: none;}
|
||||
background: none;
|
||||
height: 128px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin-left: -64px;
|
||||
left: 50%;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
background: url("ui/pause-inner.svg") no-repeat 50% 50%;
|
||||
animation-name: pause-spin;
|
||||
animation-duration: 10000ms;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin-left: -64px;
|
||||
left: 50%;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
background: url("ui/pause-outer.svg") no-repeat 50% 50%;
|
||||
animation-name: pause-spin;
|
||||
animation-duration: 5000ms;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
h3 {
|
||||
border-bottom: 0;
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 256px;
|
||||
margin-left: -128px;
|
||||
margin-top: -13px;
|
||||
text-shadow: 0 0 24px @colorBlue;
|
||||
&::before, &::after {
|
||||
position: absolute;
|
||||
font-family: "Aurebesh", sans-serif;
|
||||
font-size: 13px;
|
||||
color: @colorBlack;
|
||||
animation: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
&::before {
|
||||
content: "GAME";
|
||||
top: -13px;
|
||||
left: 42px;
|
||||
}
|
||||
&::after {
|
||||
content: "PAUSED";
|
||||
bottom: -13px;
|
||||
right: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "components/forms-global.less";
|
||||
@import "components/sidebar-global.less";
|
||||
@import "components/sidebar-global.less";
|
||||
|
||||
@keyframes pause-spin {
|
||||
from {
|
||||
transform:rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -41,4 +41,6 @@ body.light-theme {
|
|||
}
|
||||
@import "components/forms-themes.less";
|
||||
@import "components/sidebar-themes.less";
|
||||
@import "components/foundry-nav-themes.less";
|
||||
@import "components/foundry-app-window-themes.less";
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue