Commit cdd48aef authored by yPhil's avatar yPhil
Browse files

SYNC: Menu integration

parent e9156a6a
:root {
--ui-bg-color-pri: #373737;
--ui-color-pri: #f4f4f4;
--ui-color-sec: #FF9009;
--ui-color-ter: #C0B283;
--ui-color-qua: #222222;
--var-header-height: 26px;
--var-controls-width: 150px;
--var-controls-font-size: 16pt;
--var-controls-toggle-size: 18px;
--var-controls-flex-basis: 100px;
--dialog-flex-direction: row;
--handle-flex-shrink: 0;
--handle-visibility: visible;
--ui-bg-color-danger: #C63D0F;
--ui-color-danger: #FF4136;
--ui-color-success: #4db53c;
--color-danger: #000000;
}
@media screen and (max-width: 700px) {
:root {
--var-header-height: 42px;
--var-controls-width: 75%;
--var-controls-font-size: 26pt;
--var-controls-toggle-size: 36px;
--var-controls-flex-basis: 60px;
--dialog-flex-direction: column;
--handle-flex-shrink: 1;
--handle-visibility: collapse;
}
}
body {
background-color: var(--bg-color-ter) !important;
color: var(--color-pri) !important;
}
input {
margin:0;
padding: .4em;
}
.notifyjs-bootstrap-base {
background-color: var(--bg-color-sec) !important;
border-color: var(--bg-color-ter) !important;
text-shadow: none !important;
}
.notifyjs-bootstrap-base.notifyjs-bootstrap-success {
color: var(--ui-color-success) !important;
}
.notifyjs-bootstrap-base.notifyjs-bootstrap-error {
color: var(--ui-color-danger) !important;
}
input#feedGuess {
margin-right: .4em;
}
.deadCenter {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
text-align:center;
}
.hidden {
display:none;
}
#noSourcesButton button {
/* margin-top:50%; */
background-color: #39b54a;
border-color: #39b54a;
color: #FFFFFF;
}
li.ui-tabs-active,
li.mobTab:first-child {
box-shadow: none !important;
}
#tabs {
transition: all 2s ease;
}
#tabUl,
#tabs {
background: none;
border-radius: 0;
}
li.mobTab {
background-color: var(--bg-color-sec) !important;
}
h1, h2, p.ui {
color: var(--ui-color-pri) !important;
}
p.dialog > a:link {
color: var(--color-pri) !important;
}
p.dialog > a:visited {
color: var(--color-pri) !important;
}
select {
width:100%;
height: 30px;
}
/* legend { */
/* font-family: 'KaushanScriptRegular' !important; */
/* font-weight: normal; */
/* font-style: italic; */
/* font-size:120% !important; */
/* padding: .2em .8em .2em .4em; */
/* } */
fieldset > p {
margin: 0 0 .2em 0;
}
fieldset a:link {
color: var(--ui-color-pri);
}
fieldset a:visited {
color: var(--ui-color-ter);
}
fieldset,
legend {
background: none !important;
/* background-color: var(--bg-color-pri) !important; */
color: var(--ui-color-pri);
/* font-size:76% !important; */
}
legend {
font-size: 9pt;
}
fieldset {
/* border: 1px solid #BFD8D1 !important; */
/* font-size:76% !important; */
}
#progressBar {
position:absolute;
/* float: left; */
z-index: 9 !important;
top: 0;
left: 0;
width: 100%;
/* background-color: grey; */
}
#progressBar > #cursor {
width: 1%;
height: 2px;
}
#menu {
/* border-right: #2e2e2e solid 1px; */
padding:.5em;
border: none !important;
position: fixed;
width: 275px;
transition: all 300ms ease 0s;
height: 100%;
top: 0px;
left: -291px;
}
#logo > h1 {
font-family: 'LobsterRegular';
font-weight: normal;
font-style: normal;
font-size: 38pt;
margin: 0 0 .2em .2em;
color: #F1E5D1;
text-shadow: 1px 1px #3C2413;
}
#betaBadge {
position:absolute;
opacity: .8;
font-size:9pt;
top: 22px;
left: 261px;
background: var(--ui-color-sec);
padding: 2px;
border-radius: 10%;
}
.baseline {
font-family: "Times New Roman",Bodoni,Garamond,"Minion Web","ITC Stone Serif","MS Georgia", serif;
/* font-variant: small-caps; */
position: absolute;
/* font-style: oblique; */
/* color: var(--ui-color-ter); */
width: 100%;
text-align: center;
font-size: 10.5pt;
/* margin: 6px 0 0 10px; */
left: 3px;
color: #2f220a;
}
.baseline > span {
text-shadow: #FC0 1px 0 10px;
}
#baselineQ {
top: 7px;
}
#baselineA {
top: 66px;
}
#menu.expanded {
left: 0px;
}
#menu,
.ui-dialog,
.ui-dialog .ui-dialog-buttonpane,
.handle {
background: #485563; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #29323c, #485563); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #29323c, #485563); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* background-color: var(--ui-bg-color-pri); */
/* color: var(--ui-color-pri) !important; */
}
.handle {
background: #485563; /* fallback for old browsers */
}
.ui-dialog .ui-dialog-buttonpane {
margin: 0 !important;
}
.logoItem {
flex: 1 1 auto;
}
.tabCloser {
font-size: .9em;
margin: 0 .1em 0 -1em;
cursor:pointer;
}
#tabs .newFeed,
#menu > .handle {
font-size: 2rem;
position:absolute;
}
#tabs .newFeed {
right:0;
top: 20vh;
}
#menu > .handle {
left:290px;
bottom: 20vh;
}
#menu > .handle > i {
border: none !important;
line-height: 0 !important;
}
#menu {
animation: fadeIn ease 6s;
}
@keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
button#feedGuess,
.ui-spinner {
margin: 0;
}
fieldset.menuForm {
height: 100%;
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
justify-content: space-between;
}
fieldset {
margin: 0 0 .5em 0;
width: -moz-available;
padding-bottom: .4em;
padding-left: .4em;
padding-right: .4em;
}
.flexBox {
width:-moz-available;
display:flex;
justify-content: space-between;
flex-wrap: wrap;
}
.ui-widget .ui-widget {
font-size: 12pt !important;
}
.ui-widget-header {
background: none;
color: var(--ui-color-sec);
font-weight: bold;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
border: 1px solid transparent;
}
.ui-state-active,
.ui-button:active {
background: var(--ui-color-sec) !important;
color: var(--ui-color-qua) !important;
}
.ui-icon-background, .ui-state-active .ui-icon-background {
border: var(--ui-color-success);
background-color: var(--ui-color-pri);
}
.ui-button.ui-state-active:hover {
border: 1px solid var(--ui-color-ter) !important;
}
.ui-state-success {
background-color: var(--ui-color-success) !important;
}
.ui-state-error {
color: var(--ui-color-danger) !important;
background-color: var(--ui-bg-color-pri) !important;
}
.ui-visual-focus {
box-shadow: 0 0 3px 1px var(--ui-color-pri);
}
.flexBox > label {
flex: 1;
}
.grow {
flex: 1 0 auto !important;
}
.shrink {
flex: 0 1 4em !important;
}
.unique {
flex: 1 100%;
margin-right: 0 !important;
}
.twin {
flex: 1;
}
span.ui-spinner,
.ui-button {
margin-right: .4em;
margin-bottom: .4em;
}
span.ui-spinner,
.last {
margin-right: 0;
}
label:last-child {
margin-bottom: 0 !important;
}
.bottom {
margin-bottom: 0;
}
/* .prefsForm > *:not(p) { */
/* width: 100%; */
/* } */
div.testFlex {
display:flex;
}
#spinner {
width: 2rem;
}
.ui-slider {
height: 31px;
margin-right: .4em;
}
.ui-slider-handle {
height: 38px !important;
min-width: 38px;
line-height: 38px;
text-align: center !important;
}
.noBottom {
margin-bottom:0;
}
.ui-selectmenu-button.ui-button {
text-align: left;
white-space: nowrap;
width: 100% !important;
}
/* WTF */
#logo > h1 {
font-family: 'LobsterRegular';
font-weight: normal;
font-style: normal;
font-size: 38pt;
margin: 0 0 .2em .2em;
color: #F1E5D1;
text-shadow: 1px 1px #3C2413;
}
#logo > .petrolette,
.ui-dialog-content .petrolette {
color: #84A6CB;
font-size: 3.5rem !important;
margin: -2px 0 0 0 !important;
}
.ui-dialog-content .petrolette {
display: inline !important;
font-size: 1.5rem !important;
}
#killDialog .petrolette {
color: red;
font-size: 3.5rem !important;
}
#logo {
display: flex;
}
/* Wait screen */
#waitScreen{
background-color: #7C818C;
}
#waitScreen > .wspinner {
width: 200px;
height: 200px;
margin: 30% auto;
background-color: #7395AE;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
#questionDialog > p {
font-family: 'GrobeDeutschmeisterRegular';
font-size: 4em;
text-align:center;
}
button.dangerous:hover {
/* border-color: #2B374B !important; */
background-color: var(--ui-bg-color-danger) !important;
border: 1px solid var(--ui-color-qua);
}
i.dangerous:hover {
color: var(--ui-bg-color-danger) !important;
/* color: #2B374B !important; */
}
.ui-dialog .ui-dialog-titlebar-help {
/* position: absolute; */
right: 2em;
/* top: 50%; */
}
#tabs {
white-space: nowrap;
overflow: hidden;
}
#tabs > ul {
overflow: auto;
overflow-y: hidden;
}
#tabs > ul > li {
display: inline-block;
float: none;
vertical-align: bottom;
}
.tabSort {
white-space: initial;
}
.droppableCopy:hover {
cursor: copy !important;
}
.ui-dialog.ui-corner-all {
border-radius: 0px !important;
}
img.warning {
vertical-align:middle;
width:10em;
}
p.dialog-warning {
font-size:26pt;
}
div.dialog {
display:flex;
flex-direction: var(--dialog-flex-direction);
}
div.dialog > div {
flex: 1 1 auto;
}
div.dialog > div.icon {
flex: 0 0 200px;
}
div.dialog > div.content {
padding: 0 0 0 .2em;
font-size:26pt;
}
div.dialog > div.content p {
margin:0 0 .5em 0;
}
div.dialog > div.content p.name {
font-size: .5em;
color: var(--ui-color-ter) !important;
}
div.dialog > div.content p.value {
font-size: .8em;
color: var(--ui-color-pri) !important;
}
/* Hacks & workarounds */
button > i {
margin-right: .3em !important;
}
/* Feed controls */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mobHeader {
/* min-height:20px; */
height: var(--var-header-height);
max-height: var(--var-header-height);
display: flex;
flex-direction:row;
/* align-content: stretch; */
padding:0;
}
.flexGrow {