Subversion Repositories wimsdev

Rev

Rev 16864 | Blame | Compare with Previous | Last modification | View Log | RSS feed

  1. /** Default widget_boxes style */
  2.  
  3. .mode_popup{
  4.   padding:1em;
  5. }
  6.  
  7. .wims_widget_box {
  8.   margin: 5px;
  9.   max-width: 900px;
  10. }
  11.  
  12. .wims_columns {
  13.   display: flex;
  14.   flex-wrap: wrap;
  15. }
  16.  
  17. .wims_widget_box .title_box {
  18.   border-radius: 5px 5px 0 0 ;
  19.   border: 1px solid #BBB;
  20.   border-bottom-width: 0;
  21.   margin: 0;
  22.   padding: .5em;
  23. }
  24.  
  25. .wims_widget_box .title_box h1,
  26. .wims_widget_box .title_box h2,
  27. .wims_widget_box .title_box h3  {
  28.   margin-top: 2px;
  29.   margin-bottom: 0;
  30. }
  31.  
  32. .wims_widget_box .title_box .wims_title {
  33.   /* Text shadow for light text on dark background */
  34.   /*text-shadow: -1px -1px 1px rgb(0 0 0 / .5), 1px 1px 1px rgb(0 0 0 / .5);*/
  35. }
  36.  
  37. .wims_widget_box .box_content {
  38.   display: block;
  39.   background-color: #fff;
  40.   margin: 0;
  41.   padding: .5em;
  42.   clear: both;
  43.   /*text-align: center;*/
  44.   border: 1px solid #BBB;
  45.   border-radius: 0 0 5px 5px ;
  46.   min-height: 6em;
  47.   box-sizing: border-box;
  48. }
  49.  
  50.  
  51. /** details/summary html5 tags (accordions)  **/
  52. details {
  53.   margin-bottom: .5rem;
  54.   padding: 0 .5rem .5rem .5rem;
  55.   box-shadow: 0 .1rem 1rem -.5rem rgb(0 0 0 / .4);
  56. }
  57. details summary ~ div{
  58.   opacity: 0;
  59.   transform: translateY(-10px);
  60.   transition: .6s opacity ease,.6s transform ease;
  61. }
  62. details[open] summary ~ div {
  63.   opacity: 1;
  64.   transform: translateY(0);
  65. }
  66.  
  67. summary {
  68.   padding: .5rem;
  69.   margin: 0 -.5rem;
  70.   cursor: pointer;
  71.   transition: .4s background-color ease;
  72. }
  73. summary:hover::marker, summary:focus::marker{
  74.   color: var(--wims_hlink_color);
  75. }
  76.  
  77. details.wims_details {
  78.   background-color: #4442;
  79. }
  80.  
  81. .wims_details>summary {
  82.   background-color: #4442;
  83.   margin-bottom: .25em;
  84. }
  85.  
  86. .wims_details>summary:hover, .wims_details>summary:focus{
  87.   background-color: #4444;
  88. }
  89.  
  90.  
  91.  
  92. /* Small screens */
  93. @media only screen and (max-width: 40em) {
  94.   .medium_size {
  95.     width:100%;
  96.     margin: 5px;
  97.   }
  98. }
  99.  
  100. /* Medium screens */
  101. @media only screen and (min-width: 40.063em) and (max-width: 64em) {
  102.   .medium_size {
  103.     max-width: 40em;
  104.     margin: .8em auto;
  105.   }
  106. }
  107.  
  108. /* Large screens */
  109. @media only screen and (min-width: 64.063em) {
  110.   .medium_size {
  111.     width:50%;
  112.     margin: 0;
  113.     padding: .5em;
  114.     box-sizing:border-box;
  115.   }
  116.   .side_col{width: 30%;}
  117.   .main_col{width: auto;}
  118. }
  119.