Repositorio del curso CCOM4030 el semestre B91 del proyecto Artesanías con el Instituto de Cultura

index.css 3.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. * {
  20. -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
  21. }
  22. body {
  23. -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
  24. -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
  25. -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
  26. background-color:#E4E4E4;
  27. background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
  28. font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
  29. font-size:12px;
  30. height:100vh;
  31. margin:0px;
  32. padding:0px;
  33. /* Padding to avoid the "unsafe" areas behind notches in the screen */
  34. padding: env(safe-area-inset-top, 10px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 10px) env(safe-area-inset-right, 0px);
  35. text-transform:none;
  36. width:100%;
  37. }
  38. /* Portrait layout (default) */
  39. .app {
  40. background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
  41. position:absolute; /* position in the center of the screen */
  42. left:50%;
  43. top:50%;
  44. height:50px; /* text area height */
  45. width:225px; /* text area width */
  46. text-align:center;
  47. padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */
  48. margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */
  49. /* offset horizontal: half of text area width */
  50. }
  51. /* Landscape layout (with min-width) */
  52. @media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
  53. .app {
  54. background-position:left center;
  55. padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */
  56. margin:-90px 0px 0px -198px; /* offset vertical: half of image height */
  57. /* offset horizontal: half of image width and text area width */
  58. }
  59. }
  60. h1 {
  61. font-size:24px;
  62. font-weight:normal;
  63. margin:0px;
  64. overflow:visible;
  65. padding:0px;
  66. text-align:center;
  67. }
  68. .event {
  69. border-radius:4px;
  70. -webkit-border-radius:4px;
  71. color:#FFFFFF;
  72. font-size:12px;
  73. margin:0px 30px;
  74. padding:2px 0px;
  75. }
  76. .event.listening {
  77. background-color:#333333;
  78. display:block;
  79. }
  80. .event.received {
  81. background-color:#4B946A;
  82. display:none;
  83. }
  84. @keyframes fade {
  85. from { opacity: 1.0; }
  86. 50% { opacity: 0.4; }
  87. to { opacity: 1.0; }
  88. }
  89. @-webkit-keyframes fade {
  90. from { opacity: 1.0; }
  91. 50% { opacity: 0.4; }
  92. to { opacity: 1.0; }
  93. }
  94. .blink {
  95. animation:fade 3000ms infinite;
  96. -webkit-animation:fade 3000ms infinite;
  97. }
  98. a:link {
  99. text-decoration: none;
  100. color: black;
  101. }
  102. a:visited {
  103. text-decoration: none;
  104. color: black;
  105. }
  106. a:hover {
  107. text-decoration: none;
  108. color: black;
  109. }
  110. a:active {
  111. text-decoration: none;
  112. color: black;
  113. }
  114. .red {
  115. background-color: red;
  116. }