A search interface for the Performing Patents Otherwise publication as part of the Politics of Patents case study (part of Copim WP6): this parses data from the archive of RTF files and provides additional data from the European Patent Office OPS API. https://patents.copim.ac.uk
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

custom.css 6.9KB

2 년 전
2 년 전
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
  1. /*
  2. # @name: custom.css
  3. # @creation_date: 2022-09-07
  4. # @license: The MIT License <https://opensource.org/licenses/MIT>
  5. # @author: Simon Bowie <ad7588@coventry.ac.uk>
  6. # @author: Joana Chicau
  7. # @purpose: Custom CSS to override Bootstrap 5 defaults
  8. # @acknowledgements:
  9. # Bootstrap 5.1.3: https://getbootstrap.com/
  10. */
  11. /* NEW STYLE by Joana Chicau */
  12. /* FONTS*/
  13. @font-face {
  14. font-family: "Astloch-B";
  15. src: url(fonts/Astloch-Bold.ttf) format('truetype');
  16. font-weight: bold;
  17. }
  18. @font-face {
  19. font-family: "Astloch";
  20. src: url(fonts/Astloch-Regular.ttf) format('truetype');
  21. font-weight: normal;
  22. }
  23. @font-face {
  24. font-family: "Abordage";
  25. src: url(fonts/Abordage-Regular.otf) format('opentype');
  26. font-weight: normal;
  27. }
  28. @font-face {
  29. font-family: "Cmunobi";
  30. src: url(fonts/cmunobi.ttf) format('opentype');
  31. font-weight: normal;
  32. }
  33. @font-face {
  34. font-family: "Compagnon";
  35. src: url(fonts/Compagnon-Roman.otf) format('opentype');
  36. font-weight: bold;
  37. }
  38. @font-face {
  39. font-family: "Compagnon-M";
  40. src: url(fonts/Compagnon-Medium.otf) format('opentype');
  41. font-weight: bold;
  42. }
  43. @font-face {
  44. font-family: "Compagnon-L";
  45. src: url(fonts/Compagnon-Light.otf) format('opentype');
  46. font-weight: lighter;
  47. }
  48. @font-face {
  49. font-family: "Compagnon-T";
  50. src: url(fonts/Compagnon-LightItalic.otf) format('opentype');
  51. font-weight: bold;
  52. }
  53. :root {
  54. --color-dark: #0c2039;
  55. --color-whitish: #fbf9ff;
  56. --color-lightyellow: #ffff99;
  57. --color-gray: #edecec;
  58. --color-blue: #4f1dff;
  59. --color-pink: #cc285f;
  60. --title-font: "Cmunobi";
  61. --body-font: "Compagnon";
  62. /*@media screen and (min-width: 320px)*/
  63. --title-fontsize: calc(2rem + 1.5vw) !important;
  64. --body-fontsize: calc(14px + 6 * (100vw - 320px) / 1600) !important;
  65. --button-fontsize: calc(16px + 6 * (100vw - 320px) / 1600) !important;
  66. --body-fontsize-s: calc(11px + 6 * (100vw - 320px) / 1600) !important;
  67. }
  68. ::selection {
  69. background-color: var(--color-lightyellow);
  70. }
  71. body {
  72. color: var(--color-dark);
  73. font-family: var(--body-font) !important;
  74. font-size: var(--body-fontsize) !important;
  75. cursor: crosshair;
  76. background-color: var(--color-whitish) !important;
  77. }
  78. .background-random{
  79. background-position: center center;
  80. background-size: cover;
  81. background-repeat: no-repeat;
  82. }
  83. h1, .h1 {
  84. font-family: var(--title-font) !important;
  85. font-size: var(--title-fontsize) !important;
  86. -webkit-text-stroke-width: 0.01rem;
  87. -webkit-text-stroke-color: black;
  88. font-style: italic;
  89. }
  90. a.h1 {
  91. text-decoration: none;
  92. }
  93. a, a:visited {
  94. cursor: cell;
  95. color: var(--color-dark) !important;
  96. }
  97. a:hover {
  98. text-shadow: 1px 1px 10px var(--color-lightyellow);
  99. }
  100. p {
  101. margin-top: 0;
  102. margin-bottom: 0rem !important;
  103. }
  104. .contrast {
  105. color: var(--color-lightyellow) !important;
  106. }
  107. /* INDEX */
  108. .border, .border-dark {
  109. border-color: var(--color-dark) !important;
  110. border-radius: 0.25rem;
  111. }
  112. .border-glow, hr {
  113. box-shadow: 1px 1px 4px var(--color-lightyellow);
  114. }
  115. input#inputsearch, select#searchopt, select#sort, input#submit {
  116. background: var(--color-dark) !important;
  117. color: var(--color-lightyellow) !important;
  118. border: none !important;
  119. border-radius: 0.25rem !important;
  120. margin: 0.25rem;
  121. }
  122. select#searchopt{
  123. padding: 0.25rem 0.5rem;
  124. }
  125. input#inputsearch {
  126. width: 350px;
  127. }
  128. input#submit:hover {
  129. box-shadow: 0.25rem 0.25rem 0.5rem var(--color-lightyellow) !important;
  130. }
  131. .button-search a, .button-search input, .button-search select {
  132. font-size: var(--button-fontsize) !important;
  133. text-decoration: none;
  134. border-radius: 0.25rem;
  135. padding: 0.25rem 0.5rem;
  136. }
  137. .random-interferences a {
  138. color: var(--color-dark) !important;
  139. background: var(--color-lightyellow);
  140. }
  141. .random-interferences a:hover {
  142. box-shadow: 0.25rem 0.25rem 0.5rem var(--color-dark) !important;
  143. }
  144. .button-hidden-off a {
  145. color: var(--color-dark) !important;
  146. background: var(--color-gray);
  147. text-decoration: none;
  148. }
  149. .button-hidden-off a:hover {
  150. box-shadow: 0.25rem 0.25rem 0.5rem var(--color-dark) !important;
  151. }
  152. button#notes, .action {
  153. margin: 1rem 2rem;
  154. z-index: 999;
  155. position: fixed;
  156. top: 0;
  157. right: 0;
  158. }
  159. .action button {
  160. color: var(--color-pink) !important;
  161. font-size: 2rem;
  162. background-color: transparent;
  163. border: none;
  164. }
  165. button#notes:hover {
  166. color: var(--color-dark) !important;
  167. }
  168. .info {
  169. font-family: var(--body-font) !important;
  170. color: var(--color-pink) !important;
  171. }
  172. .code {
  173. line-height: 1.2rem;
  174. font-size: var(--body-fontsize-s);
  175. margin: 0.5rem 1rem;
  176. }
  177. .w-6 {
  178. max-width: 75%;
  179. }
  180. .mb-10{
  181. margin-bottom: 10rem;
  182. }
  183. .note-veritcal {
  184. font-size: var(--body-fontsize-s);
  185. position: absolute;
  186. right: 0;
  187. z-index: 200;
  188. margin: 0.5rem;
  189. border-radius: 0.25rem;
  190. padding: 0.15rem 0.25rem;
  191. writing-mode: vertical-rl;
  192. text-orientation: mixed;
  193. }
  194. .note-interference span {
  195. display: inline-flex;
  196. background-color: var(--color-lightyellow);
  197. width: 2rem;
  198. height: 1rem;
  199. }
  200. p.about-text {
  201. margin: 10% ;
  202. }
  203. .index-row {
  204. display: flex;
  205. width: 100%;
  206. flex-wrap: wrap;
  207. justify-content: space-evenly;
  208. flex-direction: row;
  209. }
  210. /* SEARCH */
  211. .search-links {
  212. font-size: var(--body-fontsize-s);
  213. }
  214. .emphasis {
  215. border-bottom: 0.10rem var(--color-lightyellow) solid;
  216. }
  217. .search_term {
  218. background: var(--color-lightyellow);
  219. }
  220. .ID-link-search {
  221. background: var(--color-lightyellow);
  222. }
  223. /* PAGE —> RANDOM IMAGES */
  224. body#random-img-page{
  225. background-color: var(--color-dark) !important;
  226. }
  227. #random-img-page .img-fluid {
  228. flex-shrink: 1;
  229. flex-basis: 10px;
  230. height: 50vh;
  231. box-shadow: 1px 1px 10px #fff6af;
  232. border-radius: 100%;
  233. transition: all 1s ease-in-out;
  234. }
  235. #random-img-page .img-fluid:hover {
  236. transform: scale(2.0);
  237. border-radius: 0.15rem;
  238. transform-origin: top left;
  239. opacity: 0.85;
  240. }
  241. /* PAGE —> RANDOM TITLES */
  242. body#page-titles a, body#page-titles span {
  243. font-size: 3.5vw; /* should be converted to calc */
  244. }
  245. .joint {
  246. padding:0rem 2.5rem ;
  247. }
  248. /* COMPARE —> 2 RANDOM PATENTS */
  249. .skewY {
  250. transform: skewY(-20deg);
  251. }
  252. .compare {
  253. display: flex;
  254. flex-wrap: wrap;
  255. flex-direction: row;
  256. justify-content: space-between;
  257. }
  258. .compare > div {
  259. width: 48%;
  260. }
  261. /* COMPARE —> 10 ABSTRACTS */
  262. .rdn-abstracts .container-fluid p::first-letter {
  263. font-size: 5rem;
  264. }
  265. .rdn-abstracts .container-fluid p {
  266. margin: 0% 20%;
  267. line-height: 1.8rem;
  268. font-size: var(--body-fontsize);
  269. }
  270. /***************** MOBILE ****************/
  271. @media screen and (min-width:0px) and (max-width: 768px) {
  272. /* INDEX SEARCH */
  273. input#inputsearch {
  274. width: 250px;;
  275. }
  276. /* RANDOM IMAGES */
  277. #random-img-page .img-fluid:hover {
  278. transform: none;
  279. border-radius: 0.15rem;
  280. opacity: 1;
  281. }
  282. /* COMPARE —> 2 RANDOM PATENTS */
  283. .compare > div {
  284. width: 100%;
  285. }
  286. .col {
  287. flex: auto !important;
  288. }
  289. }