mirror of
https://github.com/RetroShare/RetroShare.git
synced 2025-06-09 15:12:43 -04:00
rwd style
This commit is contained in:
parent
d845a3e55a
commit
4fc91be217
1 changed files with 130 additions and 90 deletions
|
@ -8,7 +8,10 @@ body {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
h2{text-transform: uppercase;}
|
|
||||||
|
h2 {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
#overlay {
|
#overlay {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
@ -39,6 +42,7 @@ h2{text-transform: uppercase;}
|
||||||
border-bottom-style: solid;
|
border-bottom-style: solid;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
padding: 0.3em;
|
padding: 0.3em;
|
||||||
border-style: none;
|
border-style: none;
|
||||||
|
@ -68,26 +72,37 @@ input[type="button"]{
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
box-shadow: 5px 5px 5px #333;
|
box-shadow: 5px 5px 9px #aaa;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn2, .box {
|
.btn2,
|
||||||
|
.box,
|
||||||
|
.btnSmall {
|
||||||
border: solid 1px rgba(0, 0, 0, 0);
|
border: solid 1px rgba(0, 0, 0, 0);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
font-size: 6mm;
|
font-size: 6mm;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #333;
|
color: #333;
|
||||||
background-color: #f79e3a;
|
background-color: #f79e3a;
|
||||||
width: 26vw;
|
|
||||||
display: inline-grid;
|
display: inline-grid;
|
||||||
margin: 0.2rem;
|
margin: 0.2rem;
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
box-shadow: 5px 5px 5px #333;
|
box-shadow: 5px 5px 9px #aaa;
|
||||||
word-break: break-all;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn2,
|
||||||
|
.box
|
||||||
|
{
|
||||||
|
width: 12rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btnSmall {
|
||||||
|
width: 7rem;
|
||||||
|
}
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
border: solid 1px rgba(0, 0, 0, 0);
|
border: solid 1px rgba(0, 0, 0, 0);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
@ -99,10 +114,20 @@ input[type="button"]{
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
|
width: 7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
span.menu:nth-child(2) {
|
span.menu:nth-child(2) {
|
||||||
background-color: rgba(0, 0, 0, 0);
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
width: 6.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.menu:nth-child(16) {
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
li .menu {
|
||||||
|
background-color: rgba(0,0,0,0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
div.btn2:nth-child(9) {
|
div.btn2:nth-child(9) {
|
||||||
|
@ -114,27 +139,16 @@ div.btn2:nth-child(9) {
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.btn2:nth-child(9):hover {
|
div.btn2:nth-child(9):hover {
|
||||||
color: #666;
|
color: #666;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn2:hover {
|
.btn2:hover {
|
||||||
background-color: orangered;
|
background-color: orangered;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnSmall{
|
|
||||||
border-style: solid;
|
|
||||||
/*border-color: orange;*/
|
|
||||||
border-color: orange;
|
|
||||||
/*border-width: 1px;*/
|
|
||||||
border-radius: 3mm;
|
|
||||||
padding: 1mm;
|
|
||||||
font-size: 100%;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
margin-bottom: 0mm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -155,8 +169,8 @@ div.btn2:nth-child(9):hover{
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
input, textarea{
|
textarea {
|
||||||
border-color: orange;
|
border-color: orange;
|
||||||
font-size: 10mm;
|
font-size: 10mm;
|
||||||
border-radius: 3mm;
|
border-radius: 3mm;
|
||||||
|
@ -164,19 +178,20 @@ input, textarea{
|
||||||
padding: 2mm;
|
padding: 2mm;
|
||||||
margin-bottom: 1mm;
|
margin-bottom: 1mm;
|
||||||
margin-right: 1mm;
|
margin-right: 1mm;
|
||||||
|
|
||||||
/* make the button the whole screen width */
|
/* make the button the whole screen width */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/* make the text input fit small screens*/
|
/* make the text input fit small screens*/
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="button"]:hover {
|
input[type="button"]:hover {
|
||||||
background-color: orangered;
|
background-color: orangered;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*chat*/
|
||||||
|
|
||||||
textarea#txtNewMsg {
|
textarea#txtNewMsg {
|
||||||
color: orange;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
border-radius: 3mm;
|
border-radius: 3mm;
|
||||||
border-width: 1mm;
|
border-width: 1mm;
|
||||||
|
@ -192,7 +207,6 @@ textarea#txtNewMsg{
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
input#txtMsgKeyword {
|
input#txtMsgKeyword {
|
||||||
/* color: orange;
|
/* color: orange;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
|
@ -204,7 +218,6 @@ input#txtMsgKeyword{
|
||||||
padding: 1mm;
|
padding: 1mm;
|
||||||
margin-bottom: 0mm;
|
margin-bottom: 0mm;
|
||||||
margin-right: 1mm;
|
margin-right: 1mm;
|
||||||
|
|
||||||
/* make the button the whole screen width */
|
/* make the button the whole screen width */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/* make the text input fit small screens*/
|
/* make the text input fit small screens*/
|
||||||
|
@ -216,39 +229,66 @@ input#txtMsgKeyword{
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexbox {
|
.flexbox {
|
||||||
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
|
display: -webkit-box;
|
||||||
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
|
/* OLD - iOS 6-, Safari 3.1-6 */
|
||||||
display: -ms-flexbox; /* TWEENER - IE 10 */
|
display: -moz-box;
|
||||||
display: -webkit-flex; /* NEW - Chrome */
|
/* OLD - Firefox 19- (buggy but mostly works) */
|
||||||
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
|
display: -ms-flexbox;
|
||||||
|
/* TWEENER - IE 10 */
|
||||||
|
display: -webkit-flex;
|
||||||
|
/* NEW - Chrome */
|
||||||
|
display: flex;
|
||||||
|
/* NEW, Spec - Opera 12.1, Firefox 20+ */
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexwidemember {
|
.flexwidemember {
|
||||||
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
|
-webkit-box-flex: 1;
|
||||||
-moz-box-flex: 1; /* OLD - Firefox 19- */
|
/* OLD - iOS 6-, Safari 3.1-6 */
|
||||||
width: 20%; /* For old syntax, otherwise collapses. */
|
-moz-box-flex: 1;
|
||||||
-webkit-flex: 1; /* Chrome */
|
/* OLD - Firefox 19- */
|
||||||
-ms-flex: 1; /* IE 10 */
|
width: 20%;
|
||||||
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
|
/* For old syntax, otherwise collapses. */
|
||||||
|
-webkit-flex: 1;
|
||||||
|
/* Chrome */
|
||||||
|
-ms-flex: 1;
|
||||||
|
/* IE 10 */
|
||||||
|
flex: 1;
|
||||||
|
/* NEW, Spec - Opera 12.1, Firefox 20+ */
|
||||||
}
|
}
|
||||||
|
|
||||||
#logo_splash {
|
#logo_splash {
|
||||||
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
|
-webkit-animation-fill-mode: forwards;
|
||||||
|
/* Chrome, Safari, Opera */
|
||||||
animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
||||||
-webkit-animation-name: logo_splash; /* Chrome, Safari, Opera */
|
-webkit-animation-name: logo_splash;
|
||||||
-webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
|
/* Chrome, Safari, Opera */
|
||||||
|
-webkit-animation-duration: 3s;
|
||||||
|
/* Chrome, Safari, Opera */
|
||||||
animation-name: logo_splash;
|
animation-name: logo_splash;
|
||||||
animation-duration: 3s;
|
animation-duration: 3s;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Chrome, Safari, Opera */
|
/* Chrome, Safari, Opera */
|
||||||
|
|
||||||
@-webkit-keyframes logo_splash {
|
@-webkit-keyframes logo_splash {
|
||||||
from {opacity: 0;}
|
from {
|
||||||
to {opacity: 1;}
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Standard syntax */
|
/* Standard syntax */
|
||||||
|
|
||||||
@keyframes logo_splash {
|
@keyframes logo_splash {
|
||||||
from {opacity: 0;}
|
from {
|
||||||
to {opacity: 1;}
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
Loading…
Add table
Add a link
Reference in a new issue