mirror of
https://github.com/Znote/ZnoteAAC.git
synced 2025-10-13 18:04:54 +02:00
New layout (Znote AAC AtomIO)
Layout is primarily changed to this because the old layout had obsolete javascript dependencies. I still want to make another default layout eventually, which is mobile friendly. This layout has a very nice character search widget though that looks for names realtime and displays them in a list beside the search.
This commit is contained in:
Znote
30
layout/css/resp.css
Normal file
30
layout/css/resp.css
Normal file
@@ -0,0 +1,30 @@
|
||||
@media screen and (max-width:1300px){
|
||||
.main {
|
||||
width: 1100px;
|
||||
}
|
||||
.banner {
|
||||
height: 214px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:1200px){
|
||||
.main {
|
||||
width: 1000px;
|
||||
}
|
||||
.banner {
|
||||
height: 192px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:1100px){
|
||||
.main {
|
||||
width: 900px;
|
||||
}
|
||||
nav .container > div > ul > li > a {
|
||||
padding: 20px 10px;
|
||||
}
|
||||
.banner {
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
}
|
||||
359
layout/css/style.css
Normal file
359
layout/css/style.css
Normal file
@@ -0,0 +1,359 @@
|
||||
:root {
|
||||
/* backgrounds */
|
||||
--primary: rgb(30,33,40);
|
||||
--secondary: rgb(25,28,33);
|
||||
--third: #ddd;
|
||||
--border: rgb(19,20,23);
|
||||
|
||||
/* text */
|
||||
--font-color: rgb(155,162,177);
|
||||
|
||||
/* Links / anchors */
|
||||
--anchor:#b39062;
|
||||
--anchor-hover:#e79424;
|
||||
|
||||
/* buttons or alert boxes with different colors */
|
||||
--bg-danger: #3c0e0e;
|
||||
--color-danger: #9e5858;
|
||||
--border-danger: #350505;
|
||||
|
||||
--bg-warning: #905c00;
|
||||
--color-warning: #39280a;
|
||||
--border-warning: #322001;
|
||||
|
||||
--bg-info: #005d90;
|
||||
--color-info: #00263e;
|
||||
--border-info: #022530;
|
||||
|
||||
--bg-success: #009039;
|
||||
--color-success: #003f0c;
|
||||
--border-success: #00380c;
|
||||
|
||||
--bg-default: rgb(15,17,20);
|
||||
--color-default: #968452;
|
||||
--border-default: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body {
|
||||
font-family: 'arial', sans-serif;
|
||||
color:var(--font-color);
|
||||
}
|
||||
|
||||
|
||||
body, ul { margin: 0; padding: 0; }
|
||||
li { list-style: none; }
|
||||
a { text-decoration: none;color:var(--anchor); }
|
||||
a:hover {color:var(--anchor-hover);}
|
||||
a:hover, button:hover, input[type="submit"]:hover { cursor: pointer; }
|
||||
* {-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;transition-duration: 0.2s;}
|
||||
*:hover {-webkit-transition-duration: 0s;-moz-transition-duration: 0s;-o-transition-duration: 0s;transition-duration: 0s;}
|
||||
|
||||
nav .container > div > ul > li > ul {
|
||||
position: absolute;
|
||||
border: 2px solid;
|
||||
border-top:none !important;
|
||||
border-color: var(--border);
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
nav { border: 10px solid var(--primary); }
|
||||
nav .container { padding-left: 10px; }
|
||||
nav .container > div > ul > li,
|
||||
.modIcon:hover > i:nth-child(2) { display: inline-block; }
|
||||
|
||||
nav .container > div > ul > li > a { padding: 20px; }
|
||||
nav .container > div > ul > li:hover > ul,
|
||||
nav .container > div > ul > li > a,
|
||||
nav .container > div > ul > li > ul > li > a { display: block; }
|
||||
nav .container > div > ul > li > ul > li > a { padding: 10px 20px; }
|
||||
nav .container, .preventCollapse, .ellipsis { overflow: hidden; }
|
||||
|
||||
.topPane { margin-bottom: 10px; }
|
||||
.leftPane { width: 70%; }
|
||||
.rightPane { width: 29%; }
|
||||
.searchForm { width: 200px; }
|
||||
.body { padding: 10px 0px; }
|
||||
table { width: 100%; }
|
||||
td { padding: 10px 5px; }
|
||||
.header { color: #d1a233; }
|
||||
.feedContainer { margin:2rem 0; }
|
||||
.pull-left { float:left; }
|
||||
.pull-right { float:right; }
|
||||
.well, .header { width: auto; }
|
||||
.centralizeContent { text-align: center; }
|
||||
.smedia { font-size: 2em; }
|
||||
|
||||
.banner {
|
||||
background: url("../img/header.png");
|
||||
height: 240px;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
margin-top: 30px;
|
||||
border: 10px solid var(--primary);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.searchForm input {
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--font-color);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#countDownTimer {
|
||||
line-height: 2.3;
|
||||
padding: 0px 10px;
|
||||
color: #5390a8;
|
||||
}
|
||||
|
||||
.modIcon > i:nth-child(2),
|
||||
.modIcon:hover > i:nth-child(1),
|
||||
/*.loginContainer, */
|
||||
nav .container > div > ul > li > ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loginForm {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.loginForm button:hover {
|
||||
background: #0000004d;
|
||||
}
|
||||
.loginForm button {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
background: rgb(15,17,20);
|
||||
color: var(--font-color);
|
||||
height: 40px;
|
||||
border: 1px solid var(--border);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.loginForm input {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
|
||||
.main {
|
||||
width: 1220px;
|
||||
margin: 2rem auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.alert-box {
|
||||
max-width: 500px;
|
||||
font-size: 14px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--third);
|
||||
margin: 0 auto;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alert-default {
|
||||
background: var(--bg-default);
|
||||
color: var(--color-default);
|
||||
border-color: var(--border-default);
|
||||
}
|
||||
.alert-info {
|
||||
background: var(--bg-info);
|
||||
color: var(--color-info);
|
||||
border-color: var(--border-info);
|
||||
}
|
||||
.alert-success {
|
||||
background: var(--bg-success);
|
||||
color: var(--color-success);
|
||||
border-color: var(--border-success);
|
||||
}
|
||||
.alert-warning {
|
||||
background: var(--bg-warning);
|
||||
color: var(--color-warning);
|
||||
border-color: var(--border-warning);
|
||||
}
|
||||
.alert-danger {
|
||||
background: var(--bg-danger);
|
||||
color: var(--color-danger);
|
||||
border-color: var(--border-danger);
|
||||
}
|
||||
.alert-collapse {display:inline-block;}
|
||||
.alert-size1 { font-size: 12px; }
|
||||
.alert-size2 { font-size: 15px; }
|
||||
.alert-size3 { font-size: 18px; }
|
||||
.alert-size4 { font-size: 20px; }
|
||||
|
||||
|
||||
nav .container > div > ul > li > ul > li > a:hover,
|
||||
.searchForm input, #countDownTimer, .loginForm input,
|
||||
nav, footer, table, .header, .feedContainer {
|
||||
background: var(--primary);
|
||||
}
|
||||
.loginForm .well {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body, nav .container,
|
||||
nav .container > div > ul > li > ul,
|
||||
.leftPane, .rightPane, .topPane,
|
||||
tr:nth-child(2n+1) {
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
footer, .feedContainer,
|
||||
nav .container, .topPane {
|
||||
border-bottom: 2px solid var(--border)
|
||||
}
|
||||
|
||||
table, .header, .well, .smedia a {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.searchForm input,
|
||||
.loginForm input,
|
||||
.alert-box {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Znote AAC */
|
||||
/* adding button style to select */
|
||||
select {
|
||||
background: rgb(15,17,20);
|
||||
color: var(--font-color);
|
||||
height: 40px;
|
||||
border: 1px solid var(--border);
|
||||
font-size: 1em;
|
||||
}
|
||||
input {
|
||||
background: rgb(15,17,20);
|
||||
color: var(--font-color);
|
||||
height: 40px;
|
||||
border: 1px solid var(--border);
|
||||
font-size: 1em;
|
||||
}
|
||||
#loginContainer li {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
ul.linkbuttons {
|
||||
margin-top: 8px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
ul.linkbuttons li {
|
||||
display: inline-block;
|
||||
border: 1px solid #d1a233;
|
||||
width: calc(50% - 10px);
|
||||
float: left;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
ul.linkbuttons li:nth-child(odd) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
ul.linkbuttons li a {
|
||||
padding: 5px 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
ul.linkbuttons:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.widget,
|
||||
.widget .body,
|
||||
.search_widget,
|
||||
.search_widget .body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.widget center {
|
||||
margin: auto;
|
||||
}
|
||||
.widget h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.search_widget form {
|
||||
margin: auto;
|
||||
}
|
||||
.search_widget input {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
.search_widget label {
|
||||
padding: 9px;
|
||||
float: left;
|
||||
}
|
||||
.search_widget form:after {
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
}
|
||||
div.relative {
|
||||
position: relative;
|
||||
}
|
||||
.search_widget #name_suggestion {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
left: -290px;
|
||||
display: none;
|
||||
}
|
||||
.search_widget #name_suggestion.show {
|
||||
display: block;
|
||||
}
|
||||
.search_widget .sname {
|
||||
text-align: right;
|
||||
}
|
||||
.search_widget .sname a {
|
||||
display: inline-block;
|
||||
background-color: black;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid rgb(30,33,40);
|
||||
}
|
||||
.page_credits .feedContainer .pull-left.leftPane {
|
||||
box-sizing: border-box;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.page_characterprofile #characterProfileTable thead th:first-of-type {
|
||||
position: relative;
|
||||
width: 28%;
|
||||
}
|
||||
.page_characterprofile #characterProfileTable thead th:last-of-type {
|
||||
text-align: left;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.page_characterprofile .outfit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.page_characterprofile .flag {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
.postHolder iframe {
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
Reference in New Issue
Block a user