ingenta-lens/styles/lens.css

A novel way of seeing content.

/*
  Typography / Basics
---------------------------------------------*/

* {
  margin: 0;
}

body {
  padding: 0;
  margin: 0;
  background-color: white;

  /* -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -webkit-transition: background-color 200ms linear;
  transition: background-color 200ms linear;*/
}

body.loading {
}

html {
  height:100%;
  -webkit-font-smoothing: antialiased;
}

body.reader {
  height: 100%;
  overflow: hidden;
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}

.container::after {
  content:"";  /* not "."! */
  display:block;
  clear:both;
}

/*
General Layout
--------------------------------------- */

#container {
  position: relative;
  margin: 0 auto;
  min-width: 800px;
}

/* In reader view */
body.reader #container {
  /*max-width: 1400px;*/ /* 988px / 16px = 61.75em */
  height: 100%;
}

body, textarea, p, input {
  font-family: 'Source Sans Pro', Helvetica, Arial, Verdana, sans-serif;
  color: #505050;
}

a {
  color: #1B6685;
  font-weight: normal;
  text-decoration: none;

/*  -moz-transition: background-color 100ms linear, color 100ms linear, opacity 100ms linear;
  -o-transition: background-color 100ms linear, color 100ms linear, opacity 100ms linear;
  -webkit-transition: background-color 100ms linear, color 100ms linear, opacity 100ms linear;
  transition: background-color 100ms linear, color 100ms linear, opacity 100ms linear;*/
}

a:hover {
  color: rgba(11, 157, 217, 1);
}

img {
  border: none;
  padding: 0;
  margin: 0;
}

strong { font-weight: 700; }

h1, h2, h3 {
  font-weight: 700;
}

h1 a { color: white; }
h1 a:hover { color: white; }

h2 {
  font-size: 1.75em;
  padding-bottom: 20px;
}

h3, h4, h5, h6 {
  margin-bottom: 20px;
  font-size: 1em;
  font-weight: 700;
}

p {
  padding-bottom: 20px;
}

p:last-child { padding-bottom: 0; }

.small {
  color: #505050;
  font-size: .75em;
  font-weight: 400;
}

/* Use border-box box model */

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

/* Article Overrides */
#container .article .resources .info .content-node.active .resource-header {
  background: #5c6570;
}

.article .resources .nodes > #articleinfo > .content {
  border-top: 1px solid #ddd;
}


.article span.annotation.author-callout-style1 {
  font-weight: bold;
  color: rgb(183, 14, 14);
}

.article span.annotation.author-callout-style2 {
  font-weight: bold;
  color: rgb(0, 179, 255);
}

.article span.annotation.author-callout-style3 {
  font-weight: bold;
  color: rgb(4, 195, 4);
}

.article span.annotation.author-callout-style4 {
  font-weight: bold;
  color: gold;
}

.author-callout-style-a1 {
  color: rgb(54, 107, 251); // Blue
}

.author-callout-style-a2 {
  color: rgb(156, 39, 176); // Purple
}

.author-callout-style-a3 {
  color: rgb(213, 0, 0); // Red
}

.author-callout-style-b1 {
  background-color: rgb(144, 202, 249); // Blue
}

.author-callout-style-b2 {
  background-color: rgb(197, 225, 165); // Green
}

.author-callout-style-b3 {
  background-color: rgb(255, 183, 77); // Orange
}

.author-callout-style-b4 {
  background-color: rgb(255, 241, 118); // Yellow
}

.author-callout-style-b5 {
  background-color: rgb(158, 134, 201); // Purple
}

.author-callout-style-b6 {
  background-color: rgb(229, 115, 115); // Red
}

.author-callout-style-b7 {
  background-color: rgb(244, 143, 177); // Pink
}

.author-callout-style-b8 {
  background-color: rgb(230, 230, 230); // Grey
}

.lens-article .content-node.cover .subjects a:not(:last-child):after {
  content: ', '
}

/* main
   --------------------------------------- */

#main {
  position: relative;
}

body.reader #main {
  height: 100%;
}

#container .loading {
  position: absolute;
  top: 15px;
  left: 70px;
  right: 0px;
  height: 49px;
  line-height: 50px;
  font-size: 12px;
}


/* Loading bar */

.spinner-wrapper {
  position: fixed;
  display: none;
  left: 50%;
  margin-left: -75px;
  width: 150px;
  top: 40%;
  z-index: 5000;
}

body.loading .spinner-wrapper {
  display: block;
}

.spinner-wrapper .spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  background: #444;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

.spinner-wrapper .message {
  color: #444;
  text-align: center;
  font-size: 12px;
  padding-top: 20px;
}

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

#MathJax_Message {
  display: none;
}