API tools faq
paste
Searaw

Late renshuu contest 2025 css (Mobile adapted))

Searaw
Nov 1st, 2025
116
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.87 KB | Source Code | 0 0
raw download clone embed print report
  1. :root {
  2.  
  3.  
  4.  
  5.     --bg-adjusted: hsl(from var(--text) h s calc(100 - l));
  6.     --text-adjusted:hsl(from var(--text) h s calc( 10 + l * 1));
  7. }
  8.  
  9. @media (max-width: 500px) {
  10.     .sched_box_v3 .sched_data{
  11.         grid-area:sched_icon-end !important
  12.     }
  13.     .sched_status{
  14.         display: unset!important;
  15.     }
  16.     .sched_icon_mini{
  17.         border-radius:0px;
  18.         margin-top: -4px;
  19.         vertical-align: center
  20.         //padding-bottom: 4px;
  21.        
  22.         height: 22px;
  23.         background-color:var(--test-color);    
  24.   clip-path: polygon(
  25.     0% 0%,      /* top-left */
  26.     100% 0%,   /* top-right shifted down (controls angle) */
  27.     100% 100%,   /* bottom-right shifted up (controls angle) */
  28.     50% 90%,
  29.     0% 100%     /* bottom-left */
  30.   );
  31.     }
  32.         .sched_icon_mini{
  33.             padding-top: 4px;
  34.             padding-bottom: 4px;
  35.        
  36.  
  37.        
  38.        color: color-mix(in srgb, var(--test-color) 50%, black 50% )!important;
  39.        
  40.        
  41.  
  42.         }
  43.    
  44. }
  45. .fwrap .sched_box{
  46.     display:flex;
  47.    
  48.     position:relative;
  49.    
  50. }
  51.  
  52. .schedbox2.sched_split  :div{
  53.  
  54.     border-radius:5px;
  55.     border-width:1px;
  56.     display:grid;
  57.     flex-wrap:wrap;
  58.     width:100%;
  59.     min-height:65px;
  60.    
  61. }
  62. .sched_box_v3.flexbox   {
  63.  
  64.     border-radius:5px!important;
  65.     border-width:1px;
  66.    // display:grid;
  67.    // flex-wrap:wrap;
  68.    // width:100%;
  69.    // min-height:65px;
  70.    
  71. }
  72. .schedbox2.sched_split  > div:nth-of-type(n+1):hover{
  73.     outline-style: solid;
  74.     outline-width: 1px;
  75.    
  76. }
  77. .sched_box_v3.flexbox:hover  {
  78.  
  79.    outline-style: solid;
  80.     outline-width: 1px;
  81.    
  82. }
  83.  
  84. .pure-u-1-2, .finish_box{
  85.     width:100%!important;
  86. }
  87.  
  88. .sched_box_v3:has(.sched_icon[data-hint="Sentences"]) {
  89.   outline-color: var(--introbox4_on);
  90.   --test-color: var(--introbox4_on);
  91.   background: linear-gradient(
  92.       90deg,
  93.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  94.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox4_on) 40%) 0%,
  95.       var(--bg_main)100%
  96.       );
  97.  
  98. }
  99. .sched_box_v3:has(.sched_icon[data-hint="Words"]) {
  100.   outline-color: var(--introbox1_on);
  101.   --test-color: var(--introbox1_on);
  102.   background: linear-gradient(
  103.       90deg,
  104.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  105.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox1_on) 40%) 0%,
  106.       var(--bg_main)100%
  107.       );
  108.  
  109. }
  110. .sched_box_v3:has(.sched_icon[data-hint="Kanji"]) {
  111.   outline-color: var(--introbox3_on);
  112.   --test-color: var(--introbox3_on);
  113.   background: linear-gradient(
  114.       90deg,
  115.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  116.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox3_on) 40%) 0%,
  117.       var(--bg_main)100%
  118.       );
  119.  
  120. }
  121. .sched_box_v3:has(.sched_icon[data-hint="Grammar"]) {
  122.   outline-color: var(--introbox2_on);
  123.   --test-color: var(--introbox2_on);
  124.   background: linear-gradient(
  125.       90deg,
  126.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  127.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox2_on) 40%) 0%,
  128.       var(--bg_main)100%
  129.       );
  130.  
  131. }
  132.  
  133. .c_circular-chart.sched_icon{
  134.     height:100%!important;
  135.     width:30px!important;
  136.    
  137.     margin: -4px 0 0 0;
  138.     background-color:var(--test-color);    
  139.   clip-path: polygon(
  140.     0% 0%,      /* top-left */
  141.     100% 0%,   /* top-right shifted down (controls angle) */
  142.     100% 100%,   /* bottom-right shifted up (controls angle) */
  143.     50% 90%,
  144.     0% 100%     /* bottom-left */
  145.   );
  146.    // filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--test-color) 50%, black 50% ));
  147.    
  148.  
  149. }
  150.  
  151. .sched_icon .c_percentage {
  152.  
  153.        background-clip: text;
  154.        -webkit-background-clip: text;
  155.        -moz-background-clip: text;
  156.        fill: color-mix(in srgb, var(--test-color) 50%, black 50% )!important;
  157.        
  158.        
  159. }
  160.  
  161. .sched_blinks > :first-child {
  162.   order: 99; /* or any number higher than others */
  163.     margin-left: 8px;
  164. }
  165.  
  166. .sched_blinks > .bl_spacer :after{
  167.     content: '-';
  168. }
  169.  
  170. .sched_data{
  171.     margin-left:10px;
  172.  
  173.     height:18px;
  174.     grid-area:inherit!important;
  175.    
  176. }
  177.  
  178. .sched_link{
  179.     align-self:normal!important;
  180.     margin-top:0px;
  181.     margin-left:10px;
  182.    
  183. }
  184.  
  185. .sched_status .tlnk:not(.pure-button){
  186.     color:var(--test-color);
  187. }
  188. .sched_status > *:not(:last-child) {
  189.   grid-column: 1;
  190.    
  191.     width:100%
  192. }
  193. .sched_status > :last-child {
  194.   grid-column: 2;
  195.     grid-row: 1 / span 2;
  196.    
  197.    
  198.    
  199.  
  200. }
  201. .sched_status > div:first-of-type:has(> .ki_light_on) {
  202.     margin-top: 12px;
  203. }
  204.  
  205. .flexbox .fcenter .sched_blinks{
  206.     display:none!important;
  207. }
  208. .tlnk .grow .right{
  209.     width:10px!important;
  210.    
  211. }
  212. .sched_status{
  213.  justify-content: space-between;
  214.     align-self:end;
  215.     margin-right: auto;
  216.  
  217.     flex-basis:100%;
  218.     width:100%;
  219.    
  220.     max-width:100%!important;
  221.     display:grid;
  222. }
  223.  
  224. .sched_link a{
  225.     --color-text:color-mix(in srgb, var(--test-color) 60%, var(--text-adjusted) 40%);
  226.     color:var(--color-text);
  227.    
  228. }
  229. .sched_link a:hover{
  230.         color:color-mix(in srgb, var(--color-text) 70%, white 30%);
  231. }
  232.  
  233. .sched_icon{
  234.     /*display:none;*/
  235. }:root {
  236.  
  237.  
  238.  
  239.     --bg-adjusted: hsl(from var(--text) h s calc(100 - l));
  240.     --text-adjusted:hsl(from var(--text) h s calc( 10 + l * 1));
  241. }
  242. .fwrap .sched_box{
  243.     display:flex;
  244.    
  245.     position:relative;
  246.    
  247. }
  248.  
  249. .schedbox2.sched_split  > div:nth-of-type(n+1){
  250.  
  251.     border-radius:5px;
  252.     border-width:1px;
  253.     display:grid;
  254.     flex-wrap:wrap;
  255.     width:100%;
  256.     min-height:65px;
  257.    
  258. }
  259. .schedbox2.sched_split  > div:nth-of-type(n+1):hover{
  260.     outline-style: solid;
  261.     outline-width: 1px;
  262.    
  263. }
  264.  
  265. .pure-u-1-2, .finish_box{
  266.     width:100%!important;
  267. }
  268.  
  269. .sched_box_v3:has(.sched_icon[data-hint="Sentences"]) {
  270.   outline-color: var(--introbox4_on);
  271.   --test-color: var(--introbox4_on);
  272.   background: linear-gradient(
  273.       90deg,
  274.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  275.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox4_on) 40%) 0%,
  276.       var(--bg_main)100%
  277.       );
  278.  
  279. }
  280. .sched_box_v3:has(.sched_icon[data-hint="Words"]) {
  281.   outline-color: var(--introbox1_on);
  282.   --test-color: var(--introbox1_on);
  283.   background: linear-gradient(
  284.       90deg,
  285.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  286.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox1_on) 40%) 0%,
  287.       var(--bg_main)100%
  288.       );
  289.  
  290. }
  291. .sched_box_v3:has(.sched_icon[data-hint="Kanji"]) {
  292.   outline-color: var(--introbox3_on);
  293.   --test-color: var(--introbox3_on);
  294.   background: linear-gradient(
  295.       90deg,
  296.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  297.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox3_on) 40%) 0%,
  298.       var(--bg_main)100%
  299.       );
  300.  
  301. }
  302. .sched_box_v3:has(.sched_icon[data-hint="Grammar"]) {
  303.   outline-color: var(--introbox2_on);
  304.   --test-color: var(--introbox2_on);
  305.   background: linear-gradient(
  306.       90deg,
  307.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  308.       color-mix(in srgb, var(--bg-adjusted) 60%, var(--introbox2_on) 40%) 0%,
  309.       var(--bg_main)100%
  310.       );
  311.  
  312. }
  313.  
  314. .c_circular-chart.sched_icon{
  315.     height:100%!important;
  316.     width:30px!important;
  317.    
  318.     margin: -4px 0 0 0;
  319.     background-color:var(--test-color);    
  320.   clip-path: polygon(
  321.     0% 0%,      /* top-left */
  322.     100% 0%,   /* top-right shifted down (controls angle) */
  323.     100% 100%,   /* bottom-right shifted up (controls angle) */
  324.     50% 90%,
  325.     0% 100%     /* bottom-left */
  326.   );
  327.    // filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--test-color) 50%, black 50% ));
  328.    
  329.  
  330. }
  331.  
  332. .sched_icon .c_percentage {
  333.  
  334.        background-clip: text;
  335.        -webkit-background-clip: text;
  336.        -moz-background-clip: text;
  337.        fill: color-mix(in srgb, var(--test-color) 50%, black 50% )!important;
  338.        
  339.        
  340. }
  341.  
  342. .sched_blinks > :first-child {
  343.   order: 99; /* or any number higher than others */
  344.     margin-left: 8px;
  345. }
  346.  
  347. .sched_blinks > .bl_spacer :after{
  348.     content: '-';
  349. }
  350.  
  351. .sched_data{
  352.     margin-left:10px;
  353.  
  354.     height:18px;
  355.     grid-area:inherit!important;
  356.    
  357. }
  358.  
  359. .sched_link{
  360.     align-self:normal!important;
  361.     margin-top:0px;
  362.      margin-left:10px;
  363.    
  364. }
  365. .sched_blinks{
  366.     align-self: flex-end;
  367. }
  368.  
  369. .sched_status .tlnk:not(.pure-button){
  370.     color:var(--test-color);
  371. }
  372. .sched_status > *:not(:last-child) {
  373.   grid-column: 1;
  374.    
  375.     width:100%
  376. }
  377. .sched_status > :last-child {
  378.   grid-column: 2;
  379.     grid-row: 1 / span 2;
  380.    
  381.    
  382.    
  383.  
  384. }
  385. .sched_status > div:first-of-type:has(> .ki_light_on) {
  386.     margin-top: 8px;
  387. }
  388. .sched_status>div:first-of-type>div  {
  389.     margin-top: 8px!important;
  390. }
  391. .sched_status>div:not(:last-child){
  392.     margin-left: 10px
  393. }
  394. .flexbox .fcenter .sched_blinks{
  395.     display:none!important;
  396. }
  397. .tlnk .grow .right{
  398.     width:10px!important;
  399.    
  400. }
  401. .sched_status{
  402.  justify-content: space-between;
  403.     align-self:end;
  404.     margin-right: auto;
  405.  
  406.     flex-basis:100%;
  407.     width:100%;
  408.    
  409.     max-width:100%!important;
  410.     display:grid;
  411. }
  412. .schedbox2.sched_split>div:nth-of-type(even) {
  413.     padding-left: 8px !important;
  414. }
  415. @media (min-width: 500px){
  416. .sched_box_v3.flexbox:not(:has(.sched_status>.sched_blinks>div>div)){
  417.    
  418.     --test-color2: color-mix(in srgb, transparent 85%, var(--test-color) 15%)!important;
  419.     background: linear-gradient(
  420.       90deg,
  421.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  422.       var(--test-color2) 0%,
  423.       var(--bg_main)100%
  424.       );
  425.     }
  426.  
  427. .sched_box_v3.flexbox:not(:has(.sched_status>.sched_blinks>div>div)) .sched_link a{
  428.     color: color-mix(in srgb,var(--test-color)70%, var(--bg-adjusted) 10%)!important;
  429.    
  430. }
  431. .sched_box_v3.flexbox:not(:has(.sched_status>.sched_blinks>div>div))  .c_circular-chart.sched_icon{
  432.     background-color: var(--test-color2);
  433.    
  434. }
  435. .sched_box_v3.flexbox:not(:has(.sched_status>.sched_blinks>div>div)) .c_circular-chart circle{
  436.     fill: none;
  437.    
  438. }
  439. .sched_box_v3.flexbox:not(:has(.sched_status>.sched_blinks>div>div)) .c_circular-chart text{
  440.     fill: color-mix(in srgb,var(--test-color)0%, var(--bg-adjusted) 50%)!important;
  441.    
  442. }
  443. }
  444.  
  445. @media (max-width: 500px){
  446.     .sched_box_v3.flexbox:not(:has(.pure-button-primary)){
  447.        
  448.     }
  449.     .sched_box_v3.flexbox:not(:has(.pure-button-primary)){
  450.    
  451.     --test-color2: color-mix(in srgb, transparent 85%, var(--test-color) 15%)!important;
  452.     background: linear-gradient(
  453.       90deg,
  454.       /*hsl(from var(--introbox4_on) h s calc(l + calc(var(--mode) * 30))) 0% ,*/
  455.       var(--test-color2) 0%,
  456.       var(--bg_main)100%
  457.       );
  458.     }
  459.  
  460. .sched_box_v3.flexbox:not(:has(.pure-button-primary)) .sched_link a{
  461.     color: color-mix(in srgb,var(--test-color)70%, var(--bg-adjusted) 10%)!important;
  462.    
  463. }
  464. .sched_box_v3.flexbox:not(:has(.pure-button-primary))  .sched_icon_mini{
  465.     background-color: var(--test-color2);
  466.    
  467. }
  468. .sched_box_v3.flexbox:not(:has(.pure-button-primary)) .sched_icon_mini {
  469.     //fill: none;
  470.     background-color: var(--test-color2)!important;
  471.    
  472. }
  473. .sched_box_v3.flexbox:not(:has(.pure-button-primary)) .sched_icon_mini{
  474.     color: color-mix(in srgb,var(--test-color)0%, var(--bg-adjusted) 50%)!important;
  475.    
  476. }
  477. }
  478.  
  479. .sched_link a{
  480.     --color-text:color-mix(in srgb, var(--test-color) 60%, var(--text-adjusted) 40%);
  481.     color:var(--color-text);
  482.    
  483. }
  484. .sched_link a:hover{
  485.         color:color-mix(in srgb, var(--color-text) 70%, white 30%);
  486. }
  487.  
  488. .sched_icon{
  489.     /*display:none;*/
  490. }
  491.  
  492. .alertsucc, .alertsucc > div:first-of-type {
  493.     background-color: transparent!important;
  494. }
  495. .alertsucc > div:nth-of-type(2), .alertsucc > div:nth-of-type(3){
  496.     padding: unset!important;
  497.     background-color: transparent!important;
  498.  
  499. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!