Design for the pages Features, FAQ and Privacy
This commit is contained in:
Catalin Scripcariu
@@ -3,20 +3,48 @@
|
||||
|
||||
.infopages_main();
|
||||
.infopages_topbar();
|
||||
|
||||
.cp-faq-header {
|
||||
padding: 0;
|
||||
font-size: 1.2em;
|
||||
a {
|
||||
padding: 0;
|
||||
#cp-main {
|
||||
background: #fff;
|
||||
}
|
||||
.cp-faq {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
background-image: url(/customize/coverfaq.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
.container {
|
||||
color: #fff;
|
||||
font-family: "Open Sans";
|
||||
}
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.cp-faq-ques-det {
|
||||
.cp-faq-header {
|
||||
a {
|
||||
padding: 0;
|
||||
h4 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
span {
|
||||
font-family: "Neuropolitical";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-faq-container {
|
||||
.cp-faq-questions-items {
|
||||
background: #3a84b6;
|
||||
color: #fff;
|
||||
padding: 1rem 1rem 0.5rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.cp-faq-questions-q {
|
||||
color: #3a84b6;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0.5rem;
|
||||
cursor: pointer;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
@@ -24,14 +52,32 @@
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:after {
|
||||
content: '\f067';
|
||||
font-family: FontAwesome;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
float: right;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
.cp-faq-questions-q:hover {
|
||||
color: #2e688f;
|
||||
text-decoration: underline;
|
||||
.cp-faq-questions-q.active-faq {
|
||||
&:after {
|
||||
content: '\f068';
|
||||
}
|
||||
}
|
||||
.cp-faq-questions-a {
|
||||
display: none;
|
||||
padding: 0;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background-color: #fff;
|
||||
color: #212529;
|
||||
}
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,53 +3,21 @@
|
||||
|
||||
.infopages_main();
|
||||
.infopages_topbar();
|
||||
|
||||
@features_th-bg: #555;
|
||||
@features_th-fg: #fff;
|
||||
@features_tr-bg-alt: #ddd;
|
||||
@features_notes: #333;
|
||||
@features_yes: #c4ffca;
|
||||
@features_no: #ffc4bc;
|
||||
@features_part: #faffd3;
|
||||
|
||||
table#cp-features-table {
|
||||
width: 100%;
|
||||
th {
|
||||
background-color: @features_th-bg;
|
||||
color: @features_th-fg;
|
||||
padding: 10px;
|
||||
border: 1px solid @features_th-bg;
|
||||
}
|
||||
tbody {
|
||||
td {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 5px;
|
||||
border: 1px solid @features_th-bg;
|
||||
}
|
||||
tr:nth-child(odd) {
|
||||
background-color: @features_tr-bg-alt;
|
||||
}
|
||||
}
|
||||
td:nth-child(4) {
|
||||
color: @features_notes;
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
}
|
||||
td:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
.yes, .no, .part {
|
||||
text-align: center;
|
||||
}
|
||||
.yes { background-color: @features_yes; }
|
||||
.no { background-color: @features_no; }
|
||||
.part { background-color: @features_part; }
|
||||
.left {
|
||||
text-align: left;
|
||||
#cp-main {
|
||||
background-color: #fff;
|
||||
}
|
||||
.cp_cont_features {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
background-image: url('/customize/cover_features.jpg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
#cp-features-register {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
@@ -62,6 +30,57 @@ table#cp-features-table {
|
||||
border-radius: 0;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
cursor: pointer;
|
||||
}
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
.cp-features-web {
|
||||
.card {
|
||||
box-shadow: 0 5px 15px rgba(69, 145, 196, 0.3);
|
||||
border: none;
|
||||
}
|
||||
h3 {
|
||||
color: #fff;
|
||||
}
|
||||
.list-group {
|
||||
li {
|
||||
&:before {
|
||||
content: "\f00c";
|
||||
font-family: "FontAwesome";
|
||||
font-size: 14px;
|
||||
color: @cryptpad_color_blue;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
div {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
a.voted {
|
||||
opacity: 0.6;
|
||||
margin-left: 15px;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.list-group-item {
|
||||
border-color: rgba(69, 145, 196, 0.125);
|
||||
}
|
||||
}
|
||||
|
||||
.cp-anon-user {
|
||||
.card-body {
|
||||
background-color: @cryptpad_color_blue;
|
||||
}
|
||||
}
|
||||
.cp-regis-user {
|
||||
@media (max-width:767px) {
|
||||
margin-top: 3em;
|
||||
}
|
||||
.card-body {
|
||||
&:first-of-type{
|
||||
background: #4591C4;
|
||||
background: -webkit-linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false
|
||||
background: linear-gradient(to right, #FF7C4F, #4592C4); // lesshint duplicateProperty: false
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,3 +3,46 @@
|
||||
|
||||
.infopages_main();
|
||||
.infopages_topbar();
|
||||
#cp-main {
|
||||
background: #fff;
|
||||
}
|
||||
.cp-privacy-top {
|
||||
padding-top: 3em;
|
||||
padding-bottom: 3em;
|
||||
background-image: url(/customize/cover-privacy.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
.container {
|
||||
color: #fff;
|
||||
font-family: "Open Sans";
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
p {
|
||||
padding-top: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cp-privacy {
|
||||
background-image: url(/customize/CryptPadlogo_op5.svg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
hr {
|
||||
margin-left: 0;
|
||||
width: 15rem;
|
||||
border-top: 2px solid #4591C4;
|
||||
}
|
||||
h3 {
|
||||
color: #1E1F1F;
|
||||
font-weight: 700;
|
||||
}
|
||||
p {
|
||||
color: #3F4141;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user