ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-04 20:05:50 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
ae2fd008d5adf4d75d3a103d4fd74c62e37dad61
xrpl-dev-portal/less/main.less

980 lines
17 KiB
Plaintext
Raw Blame History

@import "icons.less";
@import "modals.less";
@import "variables.less";
@import "mixins";
*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
body{
color: #898788;
font-family: 'Open Sans', sans-serif;
.content-root {
background-color: #f3f6fb;
-webkit-box-shadow: inset 780px 0 #fff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0,0,0,0.1);
box-shadow: inset 780px 0 #fff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0,0,0,0.1);
}
&:not(.no-literate){
.header {
position: relative;
.left {
.header-menu-button {
display: none;
position: absolute;
right: 20px;
top: 8px;
width: 40px;
height: 38px;
padding: 3px 4px;
border: 1px solid #ccc;
border-radius: 4px;
background: url('../img/burger.png') center no-repeat;
-moz-border-radius: 4px;
z-index: 888;
svg {
z-index: -1;
}
}
}
.right {
width: 50px;
iframe {
width: 50px;
}
}
}
.content-root{
background: #4a4a4c;
}
.content > pre, .content > blockquote {
color: #fff;
}
a{
color:#517ab8;
}
.content{
width: 100%;
overflow-x: hidden;
padding-top: 10px;
&>h1,&>h2,&>h3{
color: #474648;
font-family: 'Open Sans', sans-serif;
text-transform: capitalize;
}
h1, h2, .big-heading, h3{
padding-top: 20px;
padding-bottom: 10px;
&:before{
display: none;
}
}
h1 {
font-size: 25px
}
h2 {
font-size: 20px;
}
h3 {
font-size: 17px;
}
/********************** CODE *****************/
pre {
display: block;
position: relative;
float: left;
width:40%;
width: -moz-calc(~"100% - 550px");
width: -webkit-calc(~"100% - 550px");
width: -o-calc(~"100% - 550px");
width: calc(~"100% - 550px");
overflow-x: auto;
&:after {
content: ".";
display: block;
visibility: hidden;
line-height: 0;
height: 0;
}
code{
color: #fff;
word-wrap:break-word;
}
}
ul + pre {
width: -moz-calc(~"100% - 570px");
width: -webkit-calc(~"100% - 570px");
width: -o-calc(~"100% - 570px");
width: calc(~"100% - 570px");
}
li {
position: relative;
pre {
width: -moz-calc(~"100% - 620px");
width: -webkit-calc(~"100% - 620px");
width: -o-calc(~"100% - 620px");
width: calc(~"100% + 620px");
padding-left: calc(~"100% + 40px");
//
overflow: inherit;
code{
}
}
}
ul,p,pre,h1,h2,h3,h4,h5,h6,blockquote {
}
/********************** CODE *****************/
}
.guidelines-content {
box-shadow: none;
background: #fff;
color: #6E6F7E;
padding:0 15%;
.content {
padding-top: 20px;
}
.terms-conditions-link-container {
font-size: 15px;
background: #F3EEAE;
border: 1px solid darken(#F3EEAE, 20%);
padding: 10px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin: 15px 0;
color: #695221;
a {
text-decoration: underline;
color: #695221;
}
}
.download-all {
text-align: center;
font-size: 15px;
background: #F9FAFC;
border: 1px solid darken(#F9FAFC, 20%);
padding: 10px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin: 20px 0 20px;
a {
cursor: pointer;
color: #507BBA;
font-weight: bold;
font-size: 18px;
svg {
display: inline-block;
margin-top: -3px;
vertical-align: middle;
}
}
}
.brand-guidelines-row {
overflow: hidden;
padding-bottom: 25px;
position: relative;
p {
padding: 0;
color: #6E6E70;
font-size: 14px;
a {
text-decoration: underline;
}
strong {
color: #346AA9;
}
}
}
.brand-guidelines-title {
color: #474648;
text-transform: inherit;
font-weight: 600;
font-family: 'Open sans' sans-serif;
border: 0;
}
.terms-conditions-content {
p {
margin-bottom: 20px;
color: #6E6E70;
&+h2{
padding-top: 0;
}
}
}
.xrp-logos {
text-align: center;
overflow: hidden;
.xrp-logo {
position: relative;
display: inline-block;
width: 32%;
float: left;
margin-right: 2%;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 7px;
moz-border-radius: 7px;
&:nth-of-type(3n+3) {
margin-right: 0;
}
.logo-container {
padding-bottom: 90%;
position: relative;
.bg-container {
padding-top: 23%;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: -webkit-calc(~"100% - 50px");
height: -moz-calc(~"100% - 50px");
height: calc(~"100% - 50px");
background-position: center;
background-repeat: no-repeat;
background-size: 90%;
&.logo-triskelion {
background-image: url(../img/ripple-triskelion.png);
background-size: 50%;
}
&.logotype {
background-image: url(../img/logotype.png);
}
&.logo-full {
background-image: url(../img/logo-lg.png);
}
&.badge-blue, &.badge-gray {
background-size: 52%;
}
&.bg-badge-white {
background-image: url(../img/badge-white.png);
background-size: 80%;
}
}
}
.logo-download-link {
position: absolute;
bottom: 0;
text-decoration: none;
left: 0;
display: block;
width: 100%;
background: #F5F5F5;
height: 50px;
line-height: 50px;
font-weight: bold;
font-size: 17px;
border-top: 1px solid #ddd;
border-radius: 0 0 7px 7px;
moz-border-radius: 0 0 7px 7px;
cursor: pointer;
&:hover {
color: #346AA9;
}
svg {
display: inline-block;
margin-top: -2px;
vertical-align: middle;
}
}
}
}
.brand-usage-types {
padding-top: 25px;
hr {
display: block;
width: 39%;
float: left;
border-color: #ddd;
}
.unacceptable {
float: left;
}
}
.usage-brand {
overflow: hidden;
margin-bottom: 30px;
.brand-img {
width: 40%;
padding-right: 30px;
float: left;
img {
width: 100%;
}
}
.usage-brand-info {
float: left;
width: 60%;
padding-left: 55px;
position: relative;
&:before {
content: "";
height: 16px;
position: absolute;
left: 25px;
top:2px;
display: block;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
&.acceptable-use:before {
width: 20px;
background-image: url('../img/icon-check.png');
}
&.unacceptable-use:before {
top: 3px;
width: 16px;
background-image: url('../img/icon-remove.png');
}
span {
font-size: 14px;
font-weight: bold;
display: block;
color: #474648;
}
li {
font-size: 14px;
padding-left: 20px;
}
}
}
hr {
margin-bottom: 30px;
}
.attribution-badges {
margin-bottom: 50px;
padding-top: 25px;
overflow: hidden;
text-align: center;
&>div {
width: 25%;
min-width: 140px;
display: inline-block;
text-align: center;
}
.attribution-badge {
position: relative;
span.badge-blue {
margin: 0 auto 20px;
width: 100%;
height: 100px;
display: block;
background: url('../img/Ripple_attribution_badge_blue.svg') center no-repeat;
}
span.badge-gray {
margin: 0 auto 20px;
width: 100%;
height: 100px;
display: block;
background: url('../img/Ripple_attribution_badge_gray.svg') center no-repeat;
}
span.badge-white {
margin: 0 auto 20px;
width: 100%;
height: 100px;
display: block;
background: url('../img/Ripple_attribution_badge_white.svg') #000 center no-repeat;
}
a.download-logo {
display: none;
opacity: 0.6;
position: absolute;
top: 0;
right: 10%;
width: 33px;
height: 28px;
svg {
width: 33px;
height: 28px;
}
}
&:hover {
a.download-logo {
display: block;
&:hover {
opacity: 1;
}
}
}
}
}
.badge-example {
padding-bottom: 15px;
position: relative;
img {
width: 100%;
}
.badge-location {
text-align: center;
font-size: 12px;
position: absolute;
bottom: 0;
display: inline-block;
&.left {
left: 0;
}
&.right {
left: auto;
right: 0;
}
&.center {
left: 50%;
margin-left: -75px;
}
&:before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
width: 1px;
height: 70px;
border-left: 1px solid #EC008D;
}
&:after {
color: #EC008D;
content: "●";
position: absolute;
bottom: 100%;
left: 50%;
line-height: 4px;
margin-left: -3px;
}
}
}
}
}
}
.modal {
.modal-body {
.modal-body-content {
height: 360px;
overflow-x: auto;
border: 1px solid #ccc;
color: #323332;
padding:10px 15px;
font-size: 14px;
}
}
.modal-header {
position: relative;
background: #326BAA;
padding: 20px 30px;
.modal-title {
color: #FFFFFF;
font-size: 19px;
}
.close {
position: absolute;
right: 15px;
top: 15px;
font-size: 30px;
line-height: 15px;
height: 15px;
color: #93A5CF;
}
}
.modal-footer {
border-top: 0;
margin: 0;
padding-top: 10px;
text-align: center;
.btn {
color: #fff;
font-size: 17px;
text-align: center;
padding: 13px 15px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 170px;
display: inline-block;
outline: none;
border:0;
&.btn-download {
background: #56B95C;
cursor: pointer;
}
&.btn-disabled {
background: #ccc;
cursor: default;
}
}
.modal-checkbox {
text-align: left;
padding-bottom: 10px;
label {
display: inline-block;
vertical-align: top;
color: #323332;
font-size: 17px;
}
input {
margin: 7px 5px 2px 0;
}
}
}
}
.badge-blue {
margin: 0 auto 20px;
width: 135px;
height: 58px;
display: inline-block;
background: url('../img/Ripple_attribution_badge_blue.svg') center no-repeat;
}
.badge-gray {
margin: 0 auto 20px;
width: 135px;
height: 58px;
display: inline-block;
background: url('../img/Ripple_attribution_badge_gray.svg') center no-repeat;
}
.badge-white {
margin: 0 auto 20px;
width: 135px;
height: 58px;
display: inline-block;
background: url('../img/Ripple_attribution_badge_white.svg') #000 center no-repeat;
}
.menubar .section{
padding-top: 10px;
}
.menu{
a{
font-family: 'Open Sans', sans-serif;
font-size: 13px;
&.level-1{
color: #474648;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
text-transform: capitalize;
}
&.level-2{
padding-left: 25px;
color: #466db2;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
text-transform: capitalize;
&.active {
color: #517ab8 !important;
}
}
&.level-3 {
padding-left: 50px;
color: #7A7979;
&:before {
content: "- ";
}
}
&.active{
border: solid 1px #CED3E1 !important;
background: rgba(206, 211, 225, 0.5);
&:after{
display: none;
}
&:hover {
color: #517ab8 !important;
}
}
}
li.level-2{
a {
border: solid 1px transparent;
&:hover, &:active {
border: solid 1px #CED3E1;
background: rgba(206, 211, 225, 0.5);
}
}
}
}
.header{
background: #5d89ae;
padding-top: 0;
padding-bottom: 0;
height: 56px;
position: relative;
-webkit-box-shadow:inset 0 -2px 2px 0 rgba(0,0,0,0.1);
box-shadow:inset 0 -2px 2px 0 rgba(0,0,0,0.1);
h1{
border:0;
margin-top: -3px;
color: #fff;
font-size: 30px;
line-height: 56px;
font-weight: normal;
font-family: 'Open Sans', sans-serif;
i{
display: inline-block;
margin-top: -2px;
margin: 0 5px;
font-size: 24px;
line-height: 56px;
vertical-align: top;
}
}
h1 + ul{
margin-left: 30px;
border:0;
li{
display: inline-block;
border:0;
// margin-right: 10px;
a{
border:0;
display: inline-block;
line-height: 56px;
padding: 0 20px;
color: #fff;
font-size: 13px;
text-shadow:none;
&:hover{
color: #fff;
text-decoration: none;
}
}
&.active, &:hover{
a{
background: rgba(255,255,255,0.1);
}
}
}
}
}
@media (min-width:1180px) {
body {
&:not(.no-literate) {
.modal {
.modal-dialog {
width: 700px;
}
}
}
}
}
@media (max-width: 1180px){
body{
&:not(.no-literate){
.body .content-root {
background: #fff;
box-shadow: none;
width: 100%;
}
.content {
pre {
width: 100%;
overflow-x: auto;
float: none;
code {
color: #000;
padding-left: 20px;
}
}
li {
pre {
width: 100%;
padding-left: 0;
code{
padding-left: 20px;
color: #000;
}
}
}
ul + pre {
width: 100%;
}
}
.guidelines-content {
padding: 0;
.content {
padding-top: 50px;
}
}
}
}
.content {
width: 100%;
max-width: 100%;
background: #fff;
pre {
width: 100%;
padding-left: 0;
}
}
}
@media (max-width: 900px) {
body{
&:not(.no-literate){
.guidelines-content {
padding: 0;
.content {
padding: 0 20px;
padding-top: 50px;
}
.brand-guidelines-row {
padding-bottom: 50px;
.guidelines-label {
padding: 0;
text-align: center;
}
}
.xrp-logos {
.xrp-logo {
width: 49%;
&:nth-of-type(3n+3) {
margin-right: 2%;
}
&:nth-of-type(even) {
margin-right: 0;
}
a.logo-download-link {
line-height: 40px;
height: 40px;
}
.logo-container .bg-container {
height: -webkit-calc(~"100% - 40px");
height: -moz-calc(~"100% - 40px");
height: calc(~"100% - 40px");
}
}
}
.guidelines-graphics-part{
margin-bottom: 30px;
width: 100%;
}
.guidelines-text-part {
width: 100%;
max-width: 100%;
padding-bottom: 50px;
.brand-guidelines-title,p {
max-width: 100%;
}
}
.logo-trademark-guideline {
.colors-info {
ul {
width: 100%;
li{
width: 33%;
}
}
}
}
.badge-example {
.badge-location {
font-size: 10px;
&:before {
height: 60px;
}
}
}
.usage-brand {
.usage-brand-info {
width: 100%;
}
.brand-img {
padding: 0 10%;
width: 100%;
margin-bottom: 20px;
img {
max-width: 365px;
}
}
}
}
}
}
}
@media (max-width: 700px) {
body{
&:not(.no-literate){
.header {
position: relative;
.left {
.header-menu-button {
display: inline-block;
}
ul {
margin: 0;
display: none;
position: absolute;
width: 100%;
top: 100%;
left: 0;
background-color: #5D89AE;
border: 1px solid #fff;
border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
z-index: 999;
li {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
padding: 0;
a {
width: 100%;
font-weight: normal;
font-size: 18px;
line-height: 50px;
border-bottom: 1px solid #fff;
height: 50px;
}
&:last-child {
a {
border-bottom: 0px solid #fff;
}
}
}
&.active {
display: block;
}
}
}
.right {
right: 90px;
width: 50px;
}
}
}
}
}
@media (max-width: 400px) {
body{
&:not(.no-literate){
.header {
position: relative;
.left {
.header-menu-button {
display: inline-block;
}
ul {
display: none;
}
}
}
.guidelines-content {
.content {
padding-top: 0;
}
.xrp-logos {
.xrp-logo {
width: 100%;
&:nth-of-type(3n+3) {
margin-right: 0;
}
&:nth-of-type(even) {
margin-right: 0;
}
a.logo-download-link {
line-height: 50px;
height: 50px;
}
.logo-container .bg-container {
height: -webkit-calc(~"100% - 50px");
height: -moz-calc(~"100% - 50px");
height: calc(~"100% - 50px");
}
}
}
.brand-usage-types {
hr {
width: 100%;
}
}
.usage-brand {
.usage-brand-info {
padding-left: 20px;
&:before {
left: 0;
}
ul {
li {
padding-left: 0;
}
}
}
}
.attribution-badges {
margin-bottom: 15px;
&>div {
width: 100%;
margin-bottom: 15px;
}
.attribution-badge {
span {
margin-bottom: 5px !important;
}
}
}
.badge-example {
display: none;
}
}
}
}
}
Reference in New Issue View Git Blame Copy Permalink